0
marionnette 초심자로서, 저는 Collection과 CollectionViews를 사용하여 간단한 채팅 응용 프로그램을 만들려고합니다.Backbonejs Marionette 간단한 채팅 예제
메시지는 특정 이벤트에서만 가져 오기 때문에 내 컬렉션에는 fetch 메소드가 없습니다. 내 클릭 이벤트 아래의 코드 조각에서
- 하지을 사로 잡았 내가 왜 궁금해.
'메시지 보내기'이벤트를 콜렉션보기에서 처리해야합니까?
메시지를 표시하려면 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}); });}); 나는 그것이 App.chat.show (msgListView)와 함께 작동했다
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>
이 앱에 사용중인 기본 HTML과 "채팅 입력 템플릿"을 포함 할 수 있습니까? –
방금 템플릿을 추가했습니다. – coulix