终于可以为单个的Todo项和Todo列表定义view了。为此，我们要用CompositeView，它是用来表示一个树状的组合或层级结构的可视化组件。
你可以把这些views当做具有父子关系的层级结构，并且默认是可递归的。在组成view的item集合中，每个item都用CompositeView 类型的对象渲染。对于非递归的层级，我们可以定义一个itemView属性来覆盖item 的 view。
对于我们的Todo列表而言，我们要把Item View定义为 ItemView，而List View定义为CompositeView，并覆盖它的itemView设置，告诉它用ItemView表示集合中的每个item。
TodoMVC.TodoList.Views.js
TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _){ // Todo List Item View // ------------------- // // Display an individual todo item, and respond to changes // that are made to the item, including marking completed. Views.ItemView = Marionette.ItemView.extend({ tagName : 'li', template : '#template-todoItemView', ui : { edit : '.edit' }, events : { 'click .destroy' : 'destroy', 'dblclick label' : 'onEditClick', 'keypress .edit' : 'onEditKeypress', 'click .toggle' : 'toggle' }, initialize : function() { this.bindTo(this.model, 'change', this.render, this); }, onRender : function() { this.$el.removeClass('active completed'); if (this.model.get('completed')) this.$el.addClass('completed'); else this.$el.addClass('active'); }, destroy : function() { this.model.destroy(); }, toggle : function() { this.model.toggle().save(); }, onEditClick : function() { this.$el.addClass('editing'); this.ui.edit.focus(); }, onEditKeypress : function(evt) { var ENTER_KEY = 13; var todoText = this.ui.edit.val().trim(); if ( evt.which === ENTER_KEY && todoText ) { this.model.set('title', todoText).save(); this.$el.removeClass('editing'); } } }); // Item List View // -------------- // // Controls the rendering of the list of items, including the // filtering of active vs completed items for display. Views.ListView = Marionette.CompositeView.extend({ template : '#template-todoListCompositeView', itemView : Views.ItemView, itemViewContainer : '#todo-list', ui : { toggle : '#toggle-all' }, events : { 'click #toggle-all' : 'onToggleAllClick' }, initialize : function() { this.bindTo(this.collection, 'all', this.update, this); }, onRender : function() { this.update(); }, update : function() { function reduceCompleted(left, right) { return left && right.get('completed'); } var allCompleted = this.collection.reduce(reduceCompleted,true); this.ui.toggle.prop('checked', allCompleted); if (this.collection.length === 0) { this.$el.parent().hide(); } else { this.$el.parent().show(); } }, onToggleAllClick : function(evt) { var isChecked = evt.currentTarget.checked; this.collection.each(function(todo){ todo.save({'completed': isChecked}); }); } }); // Application Event Handlers // -------------------------- // // Handler for filtering the list of items by showing and // hiding through the use of various CSS classes App.vent.on('todoList:filter',function(filter) { filter = filter || 'all'; $('#todoapp').attr('class', 'filter-' + filter); }); });
在最后一块代码中，你应该能注意到有个事件处理器用的是 vent。这是一个事件聚合器，我们可以用它处理 来自 TodoList 控制器的 filterItem 触发器。
转自：http://www.ituring.com.cn/article/31755
转载请注明：阿尤博客 » Marionette：Marionette App:Todo_CompositeView(四)