Question

作为一名初学者，我正在尝试使用Collection和CollectionViews创建一个简单的聊天应用程序。

我的收藏品没有提取方法，因为这些消息只来自特定事件。

在我的点击事件下面的代码中，不被捕获，我想知道原因。
Collection视图是否应处理'send message'事件？

我是否需要调用App.chat.show（MsgListView）来显示消息？

TBox.module("ChatApp", function(ChatApp, App, Backbone, Marionette, $, _) {

App.addRegions({
    chat: "#chat-messages",
});

// Models
// ------
MsgEntry = Backbone.Model.extend({});

// Collections
// -----------
MsgCollection = Backbone.Collection.extend({
    model: MsgEntry
})

// VIews
// -----
MsgView = Backbone.Marionette.ItemView.extend({
    template: '#chat-entry-template',
});

MsgListView = Backbone.Marionette.CollectionView.extend({
    itemView: MsgView,

    events: {
          "click #chat-send-btn": "handleNewMessage"
    },

    handleNewMessage: function(data) {
        console.log("CLICK" + data);
    },

});

// Init & Finalize
// ---------------
ChatApp.addInitializer(function() {
   var msgCollection = new MsgCollection({});
   var msgEntry = new MsgEntry({'msg': 'Hello World'});
   msgCollection.add(msgEntry);
   var msgListView = new MsgListView({collection: msgCollection});

});

}）;

HTML模板

 <body>

   <!-- templates -->
    <script type="text/template" id="status-view-template">
        <div>Connecting ...</div>
    </script>
    <script type="text/template" id="chat-entry-template">
        Hello <%= msg =>
    </script>



   <div id="app">
        <div id="sidebar">

            <div id="chat">
                <h3>Chat</h3>
                <div id="chat-messages">
                </div>
                <div id-"chat-input">
                    <input type="text" name="msg" />
                    <button id="chat-send-btn">Send</button>
                </div>
            </div>

        </div>

        <!-- main -->
        <div id="page">

        </div>

    <div>

</body>

Answer 1

好的，我使用了App.chat.show（msgListView）;

此外，事件哈希仅接收ItemView事件，而不是其他dom事件。

// Init & Finalize
// ---------------
ChatApp.addInitializer(function() {
   App.vent.trigger("app:started", "ChatApp");

   var msgCollection = new MsgCollection([{foo :'bar', foo: 'lol'}]);
   var msgListView = new MsgListView({collection: msgCollection});

   // render and display the view
   App.chat.show(msgListView);
});

Backbonejs Marionette简单的聊天示例

1 个答案: