Backbonejs木偶簡單聊天示例

作爲marionnette初學者，我正在嘗試使用Collection和CollectionViews創建一個簡單的聊天應用程序。Backbonejs木偶簡單聊天示例

我的收藏夾沒有獲取方法，因爲這些消息只來自特定的事件。

在一塊我下面的Click事件代碼爲不逮住，我不知道爲什麼。
'發送消息'事件是否應該由集合視圖處理？

我是否需要調用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>

來源

2012-10-15 coulix

您可以包含您用於此應用程序的基本HTML和「聊天條目模板」嗎？ –

我剛剛添加了模板 – coulix

好，我做它用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); 
});

來源

2012-10-16 21:07:11 coulix

Backbonejs木偶簡單聊天示例

回答

相關問題