Question

我是backbone.js的初学者。

其实我正在开发聊天应用程序。

我给textarea用户输入一条消息，并且我希望当用户点击发送时，该消息应该附加到我指定的上层div。

如何使用backbone.js实现这一目标？请参阅下面的textarea代码并提交按钮：

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

请参阅下面的聊天历史视图代码：

<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();
}

请检查并帮我解决这个问题......

Answer 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();
}

这只是你应该采取的方向的一个粗略的例子。根据项目的结构，您可以对此进行许多改进。一个例子是每次插入一条消息时不重绘整个页面。可能只是将消息附加到最后。

如何使用backbone.js将textarea中的值附加到另一个视图？

1 个答案: