marionette - Backbonejs Marionette 简单聊天示例

Question

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

我的收藏没有 fetch 方法，因为消息仅来自特定事件。

在下面的代码中，我的点击事件没有被捕获，我想知道为什么。
'send message' 事件是否应该由 Collection 视图处理？

我需要调用 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>

score 0 · Accepted Answer

好的，我使它与 App.chat.show(msgListView);

此外，事件哈希仅占用 ItemView 事件的 car，而不是其他 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);
});

marionette - Backbonejs Marionette 简单聊天示例

1 回答 1

Related

Reference