marionetteJS是在backboneJS基础上进行更简洁的操作，平常开发主要用到几个涉及到view的概念：CollectionView、CompositeView、ItemView、LayoutView。这几个概念中，用的最广的当属ItemView。ItemView相对于backbone中view的概念方便之处在于：不用显式定义render方法，而是由ItemView本身完成将数据渲染到模板，并将视图追加到el，由此可见减少了很多流程化的操作。
当然本文并不是详细讲述marionetteJS的原理，而是针对使用marionetteJS实现todoMVC功能（点击下载）做讲解。由于公司根据具体业务需要，在marionetteJS上又进行了一些封装实现，不过基本功能marionetteJS没有太大出入，故如看到代码中Italent无需惊慌，只需做到理念上的理解即可。
首先让我们看一下，项目目录、view目录及templates目录：
从以上三个目录来看，相对于上一篇文章采用backbone实现todoMVC似乎没有太大差别，那么差别在哪呢？
上篇文章中提到每个view所提供的职能：
Talent.Layout.extend({
//layout采用region
model: new Talent.Model(),
template: jst['about/app-page'],
initialize: function() {
this.collection = new Todos([{
title: 'ada'
}, {
title: 'oman'
}, {
title: 'come'
}]); //初始化collection便于调试
this.listenTo(this.collection, "add", this.addOne);
this.listenTo(this.collection, "all", this.reDraw); // 监听collection的变化，执行添加和重绘
}, //这里的重绘中，用于调整部分内容显示或隐藏的逻辑
regionsClass: {
input: InputView,
list: TodoView,
toggleAll: ToggleAllView,
status: StatusView
}, // 这里采用的regionsclass简写类
regions: {
// main: '.page-main-region'
todoApp: '#todo-header',
ToggleAll: '#todo-toggleAll',
status: "#todo-footer"
// todoList: '#todo-list'
}, // regions部分简写元素部分
ui: {
// item: '.ui-item'
},
events: function() {
var events = {};
// events['click ' + this.ui.item] = 'eventHandler';
return events;
},
onRender: function() {
},
onShow: function() {
var self=this;
this.todoApp.show(new this.regionsClass.input({
collection: this.collection
}));
this.ToggleAll.show(new this.regionsClass.toggleAll({
collection: this.collection
}));
this.addAll(); //已经渲染完再显示，用于显示所有初始化数据
this.addStatus();
if (this.collection.length) {
$("#main").show();
}; //这里用于初始化显示collection数据
}, // onshow用于app模板显示完，使用的逻辑。
reDraw: function() {
if(this.collection.length==0){
this.flag = true;
}
if((this.collection.length>=1)&&this.flag)
{
this.addStatus();
this.flag = false;
}//通过设置一个flag属性，标记当collection从空到有值，再重新show statusview过程
if (this.collection.length) {
//渲染时执行显示或隐藏的代码
$("#main").show();
//如果collection为空的话，则清空footer
} else {
$("#main").hide();
}
}, //时刻监听collection变化，显示或隐藏部分region
addStatus:function(){
var statusView = new this.regionsClass.status({
collection: this.collection,
model: new Talent.Model({
done: this.collection.done().length,
remaining: this.collection.remaining().length,
length:this.collection.length
})
});
this.status.show(statusView);
},//添加状态栏视图
addOne: function(todo) {
var listItem = new this.regionsClass.list({
model: todo
});
listItem.render();
$("#todo-list").append(listItem.$el);
//这里不断加入新的项并渲染加入到appview中
},
addAll: function() {
var self = this;
_.each(self.collection.models, function(item) {
self.addOne(item); //对collection每个都进行添加到appview页面中显示
})
}
});
}); regionsClass: {
input: InputView,
list: TodoView,
toggleAll: ToggleAllView,
status: StatusView
}, // 这里采用的regionsclass简写类
regions: {
// main: '.page-main-region'
todoApp: '#todo-header',
ToggleAll: '#todo-toggleAll',
status: "#todo-footer"
// todoList: '#todo-list'
}, // regions部分简写元素部分this.todoApp.show(new this.regionsClass.input({
collection: this.collection
}));reDraw: function() {
if(this.collection.length==0){
this.flag = true;
}
if((this.collection.length>=1)&&this.flag)
{
this.addStatus();
this.flag = false;
}//通过设置一个flag属性，标记当collection从空到有值，再重新show statusview过程
if (this.collection.length) {
//渲染时执行显示或隐藏的代码
$("#main").show();
//如果collection为空的话，则清空footer
} else {
$("#main").hide();
}
}, //时刻监听collection变化，显示或隐藏部分regionthis.listenTo(this.collection, "all", this.reDraw); // 监听collection的变化，执行添加和重绘
reDraw: function() {
if(this.collection.length==0){
this.close();
}
var length = this.collection.length;
this.model.set({
done: this.collection.done().length,
remaining: this.collection.remaining().length,
length:this.collection.length
});
this.render();
}addStatus:function(){
var statusView = new this.regionsClass.status({
collection: this.collection,
model: new Talent.Model({
done: this.collection.done().length,
remaining: this.collection.remaining().length,
length:this.collection.length
})
});
this.status.show(statusView);
},//添加状态栏视图reDraw: function() {
if(this.collection.length==0){
this.flag = true;
}
if((this.collection.length>=1)&&this.flag)
{
this.addStatus();
this.flag = false;
}//通过设置一个flag属性，标记当collection从空到有值，再重新show statusview过程
if (this.collection.length) {
//渲染时执行显示或隐藏的代码
$("#main").show();
//如果collection为空的话，则清空footer
} else {
$("#main").hide();
}
}, //时刻监听collection变化，显示或隐藏部分region
前端编程提高之旅（七）----marionette实现todoMVC
原文：http://blog.csdn.net/yingyiledi/article/details/40188983