marionette - BackbonejsMarionetteの簡単なチャットの例

Question

マリオネットの初心者として、CollectionとCollectionViewsを使用して簡単なチャットアプリケーションを作成しようとしています。

メッセージは特定のイベントからのみ送信されるため、私のコレクションにはフェッチメソッドがありません。

以下のコードでは、クリックイベントがキャッチされていないので、なぜだろうと思います。
「メッセージの送信」イベントはコレクションビューで処理する必要がありますか？

メッセージを表示するには、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 イベントのみを処理し、他の 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 - BackbonejsMarionetteの簡単なチャットの例

1 に答える 1

Related

Reference