Home/ Questions/Q 8696225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T01:13:45+00:00

As a marionnette beginner, I am trying to make a simple chat application using

  • 0

As a marionnette beginner, I am trying to make a simple chat application using Collection and CollectionViews.

My collection won’t have a fetch method since the messages only come from a particular event.

  • In the piece of code below my click event is not catched and I wonder why.

  • Should the ‘send message’ event be handled by the Collection view ?

  • Do I need to call App.chat.show(MsgListView) to display the messages ?

    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 template

 <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I made it work with App.chat.show(msgListView);

    Also the events hash only takes car of the ItemView events, not other dom events.

    // 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);
});
    • 0