backbone通过controller托管view和model之间通信--demo1

想了想，学习backbone一段日子，总觉得会了，一上手一堆的不运行，调了半天，继续返回看api和相关网上资料，发现文章还是原来那些于是安心做了几个关于view和model的测试后发现backbone有view，model，collection，router，event。咋没有传说中的controller？为了方便事件的托管我增加了controller。

首先我用require.js来管理模块。

require.config({
	    // baseUrl:"libs",
		    paths:{
		        jquery:"libs/jquery-1.8.2.min",
		        underscore:"libs/underscore-min",
		        backbone:"libs/backbone-min",
		        app : "js/backbone_main",
		    },
		    shim:{
		    	jquery2 : {
		    		exports: "$"
		    	},
		    	underscore :{
		    		exports: "_"
		    	},
		    	backbone :{
		    		deps: ["underscore","jquery"],
		    		exports: "Backbone"
		    	}
		    }
	    })
define("AppRouter",["backbone","js/backbone_main"],function(Backbone,AppController){

	var AppRouter = Backbone.Router.extend({
		routes:{
			// "":"defaultRoute",
			"actions":"defaultRoute",
		},
		defaultRoute:function(actions){
			appController = new AppController
			appController.initialize();
		}	
	})
	return AppRouter
})

require(["jquery","underscore","backbone","AppRouter"],function($,_,Backbone,AppRouter){		
        var appRouter = new AppRouter;
	Backbone.history.start();
})

只有通过AppRouter来启动相应的actions。

例如增加action。

<a href="#actions">App</a>
<h3 class="msg"></h3>
<div class="header"></div>

当点击app的时候启动appController进行初始化。

define ["jquery","underscore","backbone","template/appTpl"],($,_,Backbone,appTpl) ->

	class AppModel extends Backbone.Model
		initialize: ->
			@.bind "change:msg" ,(ret)->
				@getData();
		defaults :
			msg:"Hello Marylin Changed Data!",
		getData :->
			@trigger "getModelData",@get "msg";
		setData :(data)->
			@set "msg":data;

	class AppView extends Backbone.View
		el:".header",
		events:
			"click .getbtn" : "getData",
		initialize: (tpljson)->
			@tpl = _.template appTpl.titleHead,{"tpl":tpljson};
			@
		render : ->
			@$el.html @tpl;
			@
		getData : ->
			@trigger "viewChange",
			$(".msg").text "三秒钟后数据会更新，本view会随之更新。";
		setView: (data)->
			$(".title").html data;

	class AppController
		initialize: ->
			appModel = new AppModel();
			appView = new AppView({name:"Hello Marylin!"});
			appView.render();

			appView.bind "viewChange",->
				appModel.getData();
				that=@;
				setTimeout ->
					appModel.setData "Hello Marylin Updated Data!"
				,3000

			appModel.bind "getModelData" , (data)->
				appView.setView data;


	AppController

这是一段coffee代码。看不懂的从网上找工具转化为javascript吧。

template模板是underscore中的一个模板工具。

define ['jquery', 'underscore', 'backbone'], ($, _, Backbone)->
	AppView = 
		titleHead: '
			<h1 class="title"><%= tpl.name %></h1><input class="getbtn" type="button" value="get" />
		'

通过初始化controller，得到appView和appModel。当初始化view的时候增加view的点击事件，当触发点击事件的时候只转播一下事件通过backbone中的trigger后面跟着事件名称。而controller可以通过appView捕获其派发的事件。也就是在controller中bind点击事件trigger的事件,被controller捕获。之后通过appModel来得到数据。此时appModel在获取事件的时候也不想处理，于是也trigger一个事件出来。至于谁负责处理该事件model不管了,于是在controller中继续捕获model派发的事件。这样，view和model的事件机制就通过controller托管起来。至于哪个model负责给那个view派发事件，model不需要关心。所有派发工作都交给了controller来处理。如果model发生变化需要view来更新，也是功过model的change来触发派发事件托管给controller。

这里的demo比较简单。只针对一个model和一个view做的测试。后面会陆续在其基础上做开发。。。

Backbone 中文API：http://www.csser.com/tools/backbone/backbone.js.html

Underscore 中文 API：http://www.css88.com/doc/underscore/

Underscore API：http://underscorejs.org/