Backbone.js का उपयोग कर textarea से दूसरे दृश्य में मूल्य कैसे संलग्न करें? - jquery, backbone.js

मैं backbone.js के लिए शुरुआत कर रहा हूँ।

असल में मैं चैट एप्लिकेशन विकसित कर रहा हूं।

मैंने उपयोगकर्ता को एक संदेश टाइप करने के लिए टेक्स्टरेरा दिया और मैं चाहता हूं कि जब उपयोगकर्ता भेजने पर क्लिक करता है तो वह संदेश ऊपरी div में जोड़ा जाना चाहिए जिसे मैंने निर्दिष्ट किया था।

backbone.js का उपयोग करके यह कैसे प्राप्त किया जा सकता है? कृपया textarea के लिए नीचे कोड देखें और सबमिट बटन:

<textarea name="message" cols="20" rows="4" id="usermessage" ></textarea>
<input name="submitmessage" type="submit" id="submitmessage" value="Send" />

कृपया chathistory दृश्य के लिए नीचे कोड देखें:

<div id="chatHistory"></div>

मैं केवल backbone.js का उपयोग करके इसे प्राप्त करना चाहता हूं। कृपया सहायता कीजिए....

window.ChatHistoryView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#chat_History").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
},
events: {
//   "click input[type=button]": "doSearch"
},

});
window.ChatInputView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#chat_Input").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
},
events: {
"click input[type=submit]": "updateChatHistory"
},

updateChatHistory: function( event ){
this.chatHistoryView.$e1.append();
app.navigate("", true);
window.history.back();
}

कृपया इसे हल करने के लिए जांचें और मेरी मदद करें ...

उत्तर:

जवाब के लिए 0 № 1

ऐसा करने के कुछ तरीके हैं। सबसे आसान होगा अपने इतिहास दृश्य में एक विधि का पर्दाफाश करना जो एक विधि स्वीकार करता है और दृश्य को अद्यतन करता है।

अपने ChatHistoryView को इस तरह अपडेट करें

messages : [], //this is a collection of messages the history view is showing

//update your render method
render: function(){
var template = _.template( messageTpl, { messages : this.messages } ); //note that message tpl is your raw template
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}

addMessage : addMessage(message) { //message is an object
messages.push(message);
this.render();
}

और इस तरह अपने ChatInputView को अपडेट करें

updateChatHistory: function( event ){
//construct an object
var message = {
text : this.$el.find("#usermessage").val()
};
this.chatHistoryView.addMessage(message); //pass the message to the history view

// whatever other code you want that will do things
app.navigate("", true);
window.history.back();
}

यह आपको दिशा का एक कच्चा उदाहरण हैलेना चाहिए आपके प्रोजेक्ट की संरचना के आधार पर आप इसमें कई सुधार कर सकते हैं। एक उदाहरण जब आप एक संदेश डालेंगे तो पूरे पृष्ठ को फिर से नहीं लेना होगा। संदेश को अंत में जोड़ने के लिए बस इसके लायक हो सकते हैं।


संबंधित सवाल
सबसे लोकप्रिय