Layout和ItemView有个很大的区别，它可以包含region。在定义Layout时，我们要给出template ，以及这个template中所包含的region。在渲染完layout之后，我们可以用所定义的regions显示其他views。也就是我们要通过Layout的定义确定要在每个房间里放上什么，以及应该具备什么功能。
在下面的TodoMVC Layout模块中，我们要定义下面两个Layout：
- Header: 我们可以在这里创建新的Todo
- Footer: 我们可以在这里显示还有多少Todo，以及做完了多少之类的汇总信息
这样，之前放在 AppView 和 TodoView中的一些view逻辑就被挪到这里来了。
注意一下 ，Marionette module (比如下面这个) 实现了一个简单的模块系统，用来在Marionette apps中实现私有化和封装。然而我们不是必须要这么做，还可以用 RequireJS + AMD 实现。
TodoMVC.Layout.js:
TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _){ // Layout Header View // ------------------ Layout.Header = Marionette.ItemView.extend({ template : '#template-header', // UI bindings create cached attributes that // point to jQuery selected objects ui : { input : '#new-todo' }, events : { 'keypress #new-todo': 'onInputKeypress' }, onInputKeypress : function(evt) { var ENTER_KEY = 13; var todoText = this.ui.input.val().trim(); if ( evt.which === ENTER_KEY && todoText ) { this.collection.create({ title : todoText }); this.ui.input.val(''); } } }); // Layout Footer View // ------------------ Layout.Footer = Marionette.Layout.extend({ template : '#template-footer', // UI bindings create cached attributes that // point to jQuery selected objects ui : { count : '#todo-count strong', filters : '#filters a' }, events : { 'click #clear-completed' : 'onClearClick' }, initialize : function() { this.bindTo(App.vent, 'todoList:filter', this.updateFilterSelection, this); this.bindTo(this.collection, 'all', this.updateCount, this); }, onRender : function() { this.updateCount(); }, updateCount : function() { var count = this.collection.getActive().length; this.ui.count.html(count); if (count === 0) { this.$el.parent().hide(); } else { this.$el.parent().show(); } }, updateFilterSelection : function(filter) { this.ui.filters .removeClass('selected') .filter('[href="#' + filter + '"]') .addClass('selected'); }, onClearClick : function() { var completed = this.collection.getCompleted(); completed.forEach(function destroy(todo) { todo.destroy(); }); } }); });
接下来我们要处理应用的路由和工作流，比如对页面中Layout显示还是隐藏起来的控制。
转载请注明：阿尤博客 » Marionette：Marionette App:Todo_装修设计图 TodoMVC.Layout（二）