TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views

浏览数：25 / 时间：2015年06月09日

这个版本的TodoMVC中的视图组织划分比较细，更加易于理解，这也得益于Marionette为我们带来了丰富的视图选择，原生的backbone只有views，而Marionette则有itemview, collectionview, compositeview 和layoutview.

js/templates.js

/*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传给tpl处理返回string内容,详细可以查看js/lib/tpl.js定义
        todosCompositeView: require(‘tpl!templates/todoListCompositeView.tmpl‘),//同上
        footer: require(‘tpl!templates/footer.tmpl‘),//同上
        header: require(‘tpl!templates/header.tmpl‘)//同上
    };
});

js/templates/head.tmpl

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

js/views/head.js 这个view是用来实现输入创建新的todo的view视图

/*global define */
define([
    ‘marionette‘,
    ‘templates‘
], function (Marionette, templates) {
    ‘use strict‘;

    return Marionette.ItemView.extend({
        template: templates.header,//参考templates.js里面的模板的定义

        ui: {
            input: ‘#new-todo‘//在Merionette中ItemView可以用ui来组织dom元素方便使用，返回的是jQuery对象
        },

        events: {
            ‘keypress #new-todo‘: ‘onInputKeypress‘//原生的backbone的view dom事件绑定，监听Enter键触发
        },

        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(‘‘);
            }
        }
    });
});