MVC MVVM

/*
*Model
*model管理应用的数据。当mode数据发生改变的时候，会通知他的监听者(可能是view)，收到通知后，监听者会做出相应的变化
*/
var Pet = Backbone.Model.extend({
	// 缺省的属性
	defaults: function() {
		return {
			title: "Pet",
			name: "Tom"
		}
	}
	// 确保每一个都有一个名字
	initialize: function() {
		this.set({
			"name": this.defaults().name
		});
	}
})

/*
*View
*view是当前状态model的知觉展现，view会观察模型的变化，当模型改变的时候被通知，同时允许view来更新自己。一般情况下会在view中使用魔板引擎渲染model
*/
var PetView = Backbone.View.extend({
	//渲染容器的标签
	tagName: "S",
	// 模板
	template: _.template($(‘#iten-template‘).html()),
	// 在渲染容器上绑定的事件
	events: {
		"click .toggle" : "toggleDone",
		"dbclick .view" : "edit"
	}
	// view监听model的变化
	initalize: function() {
		this.model.on(‘change‘,this.render,this);
		this.model.on(‘destroy‘,this.remove,this);
	}
	// 渲染
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		this.$el.toggleClass(‘done‘,this.model.get(‘done‘));
		return this;
	}
	toggleDone: function() {
		this.model.toggle();
	}
})

/*
*Controllers
*controllers是位于models和views之间的调解人，他的工作是当model改变时来更新view和当用户操作view时来更新model
*/
var PetRouter = BackRouter.extend({
	routers: {
		"pet/:id": "router"
	},
	route: function(id) {
		var item = pet.get(id);
		var view = new PetView({
			model: item;
		})
		something.html(view.render().el);
	}
})

// MVVM
/*
*model
*同其他的mv*家族成员一样，Model代表特定领域的数据或者应用所需的数据，一个典型的特定领域的数据如用户信息【用户名，头像，email,电话】，或者一首音乐的信息【歌曲名，发行年份，专辑】;
Model仅仅关注数据信息，不关心任何行为；她不格式化数据或者影响数据在浏览器中的展现，这些不是他的职责；格式化数据是view层的任务，同时业务逻辑层被封装在viewmodel中，用来和model进行交互。
在Model层做的一个比较意外的行为是对数据的验证，比如当用户输入email的时候，判断email的格式是否正确。
在KnockoutJS中,Model基本是按照上面的定义来实现的，但是会有通过ajax调用服务器服务来进行读写Model数据
*/
var Pet = function(title,name) {
	this.title = koobservable(title);
	this.name = ko.observable(name);
	this.editing = ko.observable(false);
}

/*
*view
*View是指应用中和用户直接交互的部分，他是一个交互式的UI来表示ViewModel的状态，View被认为是主动的，而不是被动的？这句话的意思是说被动的View在应用中不关心model的领域，model的领域在controller中维护；MVVM的主动式的View包含数据绑定，事件和需要理解model和viewmodel的行为，尽管这些行为可以和属性对应，view仍然需要响应viewmodel的事件,同时View不负责控制状态。
KnockoutJS的view层就是一个简单的html文档，它里面会有关联到viewmodel的数据声明，同时KnockoutJS的view层显示从ViewModel中获取的数据，传递命令给viewmodel,并且更新viewmodel改变的状态。
*/
//<p>Fn: <input data-bind="value: title" /></p>
// 	<p>Ln: <input data-bind="value: name" /></p>
// 	<button data-bind="click: save">保存</button>
// 	<button data-bind="click: del">删除</button>

/*
*viewmodel
*可以认为ViewModel是一个专门用于数据转换的Controller,它可以把Model中的信息转换为View中的信息，同时从View专递命令给Model;
从这个意义上来说，ViewModel看上去更像一个Model,但是它控制着View的很多显示逻辑，同时ViewModel也暴漏一些方法用来维护view的状态，根据View的行为和事件来更新model；
综上，ViewModel位于UI层的后面，暴漏数据给View,可以认为是View层的数据和行为的源；
KnockoutJS把ViewModel解释为数据的展现和表现在UI上的行为，他不是ui需要持久化的数据模型，但是他可以持有用户存储的数据；Knockout的 ViewModels是采用javascript对象实现的，不用关心html标签，这种抽象的方法可以使它们的实现保持简单。
*/
var PetViewModel = {
	title: ko.onservable("Tom"),
	name: ko.onservable("S"),
	savePet: function() {
		var pvm = PetViewModel;
		self.Pets.push(new Pet(pvm.title,pvm.name));
	},
	removePet: function() {
		self.Pets.pop();
	}
}