/*global define */
define(function (require) {//这里用了简写，因为require.js是CommonJS 模块，相当于 define(["require"],function(require){'use strict';return {todoItemView: require('tpl!templates/todoItemView.tmpl'),//tpl是requireJS的text.js插件的扩展，!符号把templates/todoItemView.tmpl文件的url传给tpl处理返回string内容,详细可以查看js/lib/tpl.js定义,tpl.js是个模版引擎，可以对模板文件进行去空格，去注释，去xml的meta信息等等todosCompositeView: require('tpl!templates/todoListCompositeView.tmpl'),//同上footer: require('tpl!templates/footer.tmpl'),//同上header: require('tpl!templates/header.tmpl')//同上
    };
});

<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>

/*global define */
define(['marionette','templates'
], function (Marionette, templates) {'use strict';return Marionette.ItemView.extend({template: templates.header,//参考templates.js里面的模板的定义,通过key取值返回value
ui: {input: '#new-todo'//在Merionette中ItemView可以用ui来组织dom元素方便使用，返回的是jQuery对象
        },events: {'keypress #new-todo': 'onInputKeypress'//原生的backbone的view dom事件绑定，监听Enter键触发下面的新建一个新的todo事件
        },onInputKeypress: function (event) {var ENTER_KEY = 13;var todoText = this.ui.input.val().trim();if (event.which === ENTER_KEY && todoText) {this.collection.create({title: todoText});this.ui.input.val('');}}});
});

<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>

/*global define */
define(['marionette','templates','views/TodoItemView'
], function (Marionette, templates, ItemView) {'use strict';return Marionette.CompositeView.extend({//compositeView是一种混合view，里面可以包含有itemviewtemplate: templates.todosCompositeView,//在js/templates.js里面定义
itemView: ItemView,//指定itemview为views/TodoItemView
itemViewContainer: '#todo-list',//itemview的container或者说外面的dom节点是#todo-list，注意
ui: {toggle: '#toggle-all'},events: {'click #toggle-all': 'onToggleAllClick'//把全部标记为已完成的ui，及定义相应的事件
        },initialize: function () {this.listenTo(this.collection, 'all', this.updateToggleCheckbox, this);//设置监听collection的任意变动都会触发更新checkbox事件
        },onRender: function () {//render时也触发this.updateToggleCheckbox();},updateToggleCheckbox: function () {var allCompleted = this.collection.reduce(function (lastModel, thisModel) {//调用underscore库的reduce函数把collection中所有的model的completed值循环作一次"与"运算得出有没有没完成，返回true/falsereturn lastModel && thisModel.get('completed');}, true);this.ui.toggle.prop('checked', allCompleted);//如果是allcompleted是true则显示为checked状态
        },onToggleAllClick: function (event) {//点击事件触发把所有的item标为completed或者反选var isChecked = event.currentTarget.checked;this.collection.each(function (todo) {todo.save({ completed: isChecked });});}});
});

<div class="view"><input class="toggle" type="checkbox"<% if (completed) { %> checked<% } %>><label><%= title %></label><button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">

/*global define */
define(['marionette','templates'
], function (Marionette, templates) {'use strict';var ENTER_KEY = 13;var ESCAPE_KEY = 27;return Marionette.CompositeView.extend({//这个view也相对比较复杂，功能也比较多，所以用了compositeviewtagName: 'li',template: templates.todoItemView,value: '',//下面会用到
ui: {edit: '.edit'},events: {//绑定相应的事件'click .toggle': 'toggle','click .destroy': 'destroy','dblclick label': 'onEditDblclick','keydown .edit': 'onEditKeyDown','blur .edit': 'onEditBlur'},initialize: function () {//初始化时执行this.value = this.model.get('title');this.listenTo(this.model, 'change', this.render, this);},onRender: function () {//每次render时执行this.$el.removeClass('active completed').addClass(this.model.get('completed') ? 'completed' : 'active');},destroy: function () {this.model.destroy();},toggle: function () {this.model.toggle().save();},toggleEditingMode: function () {this.$el.toggleClass('editing');},onEditDblclick: function () {this.toggleEditingMode();this.ui.edit.focus().val(this.value);},onEditKeyDown: function (event) {if (event.which === ENTER_KEY) {this.ui.edit.trigger('blur');}if (event.which === ESCAPE_KEY) {this.ui.edit.val(this.model.get('title'));this.ui.edit.trigger('blur');}},onEditBlur: function (event) {this.value = event.target.value.trim();if (this.value) {this.model.set('title', this.value).save();} else {this.destroy();}this.toggleEditingMode();}});
});

<span id="todo-count"><strong>0</strong> items left</span>
<ul id="filters"><li><a href="#/">All</a></li><li><a href="#/active">Active</a></li><li><a href="#/completed">Completed</a></li>
</ul>
<button id="clear-completed"></button>

/*global define */
define(['marionette','templates','views/ActiveCount','views/CompletedCount'
], function (Marionette, templates, ActiveCount, CompletedCount) {'use strict';return Marionette.Layout.extend({//footer功能点比较多，有a热点，也有统计用的view如activeCount或者completedCount，所以可以用Layoutview
        template: templates.footer,regions: {activeCount: '#todo-count',//划分regions来管理completedCount: '#clear-completed'},ui: {filters: '#filters a'},events: {'click #clear-completed' : 'onClearClick'},onRender: function () {this.activeCount.show(new ActiveCount({ collection: this.collection }));//调相应的子ActiveCount来显示this.completedCount.show(new CompletedCount({ collection: this.collection }));//调相应的子ActiveCount来显示
        },updateFilterSelection: function (filter) {//在app.js外面被调用this.ui.filters.removeClass('selected').filter('[href="#/' + filter + '"]').addClass('selected');//纯ＵＩ控制显示或者隐藏相应的item
        },onClearClick: function () {window.app.vent.trigger('todoList:clear:completed');//调外部在app.js定义的函数
        }});
});

/*global define */
define(['marionette','jquery'
], function (Marionette, $) {'use strict';return Marionette.View.extend({//用最简单的viewinitialize: function () {this.listenTo(this.collection, 'all', this.render, this);},render: function () {//直接render UI控制显示，计算显示还有多少todo没complete然后显示this.$el = $('#todo-count');var itemsLeft = this.collection.getActive().length;var itemsWord = itemsLeft < 1 || itemsLeft > 1 ? 'items' : 'item';this.$el.html('<strong>' + itemsLeft + '</strong> ' + itemsWord + ' left');}});
});

/*global define */
define(['marionette','jquery'
], function (Marionette, $) {'use strict';return Marionette.View.extend({//用最简单的viewinitialize: function () {this.listenTo(this.collection, 'all', this.render, this);},render: function () {//直接render UI控制显示，计算有多少todo已经complete然后显示相应的clear completed的菜单this.$el = $('#clear-completed');var completedTodos = this.collection.getCompleted();this.$el.toggle(completedTodos.length > 0).html('Clear completed (' + completedTodos.length + ')');}});
});

/*** Adapted from the official plugin text.js** Uses UnderscoreJS micro-templates : http://documentcloud.github.com/underscore/#template* @author Julien Caban猫s <julien@zeeagency.com>* @version 0.2** @license RequireJS text 0.24.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.* Available via the MIT or new BSD license.* see: http://github.com/jrburke/requirejs for details*/
/*jslint regexp: false, nomen: false, plusplus: false, strict: false */
/*global require: false, XMLHttpRequest: false, ActiveXObject: false,define: false, window: false, process: false, Packages: false,java: false */(function () {
//>>excludeStart('excludeTpl', pragmas.excludeTpl)var progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,buildMap = [],templateSettings = {evaluate    : /<%([\s\S]+?)%>/g,interpolate : /<%=([\s\S]+?)%>/g},/*** JavaScript micro-templating, similar to John Resig's implementation.* Underscore templating handles arbitrary delimiters, preserves whitespace,* and correctly escapes quotes within interpolated code.*/template = function(str, data) {var c  = templateSettings;var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +'with(obj||{}){__p.push(\'' +str.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(c.interpolate, function(match, code) {return "'," + code.replace(/\\'/g, "'") + ",'";}).replace(c.evaluate || null, function(match, code) {return "');" + code.replace(/\\'/g, "'").replace(/[\r\n\t]/g, ' ') + "; __p.push('";}).replace(/\r/g, '').replace(/\n/g, '').replace(/\t/g, '')+ "');}return __p.join('');";return tmpl;/** /var func = new Function('obj', tmpl);return data ? func(data) : func;/**/};
//>>excludeEnd('excludeTpl')
define(function () {
//>>excludeStart('excludeTpl', pragmas.excludeTpl)var tpl;var get, fs;if (typeof window !== "undefined" && window.navigator && window.document) {get = function (url, callback) {var xhr = tpl.createXhr();xhr.open('GET', url, true);xhr.onreadystatechange = function (evt) {//Do not explicitly handle errors, those should be//visible via console output in the browser.if (xhr.readyState === 4) {callback(xhr.responseText);}};xhr.send(null);};} else if (typeof process !== "undefined" &&process.versions &&!!process.versions.node) {//Using special require.nodeRequire, something added by r.js.fs = require.nodeRequire('fs');get = function (url, callback) {callback(fs.readFileSync(url, 'utf8'));};}return tpl = {version: '0.24.0',strip: function (content) {//Strips <?xml ...?> declarations so that external SVG and XML//documents can be added to a document without worry. Also, if the string//is an HTML document, only the part inside the body tag is returned.if (content) {content = content.replace(xmlRegExp, "");var matches = content.match(bodyRegExp);if (matches) {content = matches[1];}} else {content = "";}return content;},jsEscape: function (content) {return content.replace(/(['\\])/g, '\\$1').replace(/[\f]/g, "\\f").replace(/[\b]/g, "\\b").replace(/[\n]/g, "").replace(/[\t]/g, "").replace(/[\r]/g, "");},createXhr: function () {//Would love to dump the ActiveX crap in here. Need IE 6 to die first.var xhr, i, progId;if (typeof XMLHttpRequest !== "undefined") {return new XMLHttpRequest();} else {for (i = 0; i < 3; i++) {progId = progIds[i];try {xhr = new ActiveXObject(progId);} catch (e) {}if (xhr) {progIds = [progId];  // so faster next timebreak;}}}if (!xhr) {throw new Error("require.getXhr(): XMLHttpRequest not available");}return xhr;},get: get,load: function (name, req, onLoad, config) {//Name has format: some.module.filext!strip//The strip part is optional.//if strip is present, then that means only get the string contents//inside a body tag in an HTML string. For XML/SVG content it means//removing the <?xml ...?> declarations so the content can be inserted//into the current doc without problems.var strip = false, url, index = name.indexOf("."),modName = name.substring(0, index),ext = name.substring(index + 1, name.length);index = ext.indexOf("!");if (index !== -1) {//Pull off the strip arg.strip = ext.substring(index + 1, ext.length);strip = strip === "strip";ext = ext.substring(0, index);}//Load the tpl.url = 'nameToUrl' in req ? req.nameToUrl(modName, "." + ext) : req.toUrl(modName + "." + ext);tpl.get(url, function (content) {content = template(content);if(!config.isBuild) {//if(typeof window !== "undefined" && window.navigator && window.document) {content = new Function('obj', content);}content = strip ? tpl.strip(content) : content;if (config.isBuild && config.inlineText) {buildMap[name] = content;}onLoad(content);});},write: function (pluginName, moduleName, write) {if (moduleName in buildMap) {var content = tpl.jsEscape(buildMap[moduleName]);write("define('" + pluginName + "!" + moduleName  +"', function() {return function(obj) { " +content.replace(/(\\')/g, "'").replace(/(\\\\)/g, "\\")+"}});\n");}}};
//>>excludeEnd('excludeTpl')return function() {};});
//>>excludeEnd('excludeTpl')
}());