BackBone,Marionette 初步学习笔记

需要了解的事情:


1.视图之间通信
系统中的每一个模块都应该完全独立于其它模块，然后他们能通信于其它模块的唯一方法就是通过全局对象的事件。通过这种方式，一个模块可以监听他们需要监听的事件、并回应这些事件，而不需要了解系统外的其它东西甚至是否存在。
Backbone:

Backbone.on('documentEdit', this.onDocumentEdit, this);
Backbone.trigger('documentEdit');

2.region
--项目里面Talent.app.container.show(layoutView);

var region = new Backbone.Marionette.Region({
  el: "#container"
});

--它会控制#container里面的DOM

App.addRegions({
  container: "#container",
  footer:    "#footer"
});

--全局添加regions

3.compositeview

compositeview继承自collectionview，collectionview只能迭代集合。

但是compositeview可以递归迭代集合的集合。

http://rubendiazjorge.me/2014/11/28/marionette-js-compositeview-example/
http://jsfiddle.net/derickbailey/AdWjU/

4.router

4.1-hash是什么？
（fragment），改变浏览器url的部分不会引起页面变化，则这部分叫做hash

etc. http://baidu.com/#test------->test 就是hash

4.2-为什么要用hash？

因为hash服务端是获取不到的，并且hash不会改变浏览器页面。但是借助于前端js脚本，可以做到有效区分当前页面。所以，可以利用hash来做到前端分离。

4.3-如何监听hashchange？

以jquery为例子：

Talent.$(window).on('hashchange',function(){
    console.log(1);
});

4.4-talent怎么做的？

// Depending on whether we're using pushState or hashes, and whether
// 'onhashchange' is supported, determine how we check the URL state.
if (this._hasPushState) {
  Backbone.$(window).on('popstate', this.checkUrl);
} else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
  Backbone.$(window).on('hashchange', this.checkUrl);
} else if (this._wantsHashChange) {
  this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
}

4.5-router和这个有啥关系？

路由：路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程；
根据定义可知。

5.onclose,视图删除事件都做了啥
//模型销毁时，删除对应el。视图需要绑定模型的delete事件

var TodoView = Backbone.View.extend({
    initialize: function(){
       _.bindAll(this, 'render', 'remove');
       this.model.bind('change', 'this.render');
       this.model.bind('delete', 'this.remove');
    },
 
    remove: function(){
        $(this.el).remove();
    }
});

--marrionetee更简单了，close方法

close: function(){
	this.stopListening();
	this.triggerMethod("close");
	this.unbind();
}

它也会清理所有的Marionette的view默认设置的配置


6.listenTo 和 on的区别
监听对象不同，例如：

view.listenTo(model, 'change', view.render);

view 监听 model 的 change 事件，然后触发 view.render
--所以我的todo例子可以做成，model的on事件改成view里面view监听model的事件，这样就能避免在model里面没有view对象而需要在view里面手动触发view.render方法 
--marrionette就更简单了

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
     modelEvents: {
          'change:attribute': 'attributeChanged render',
          'destroy': 'modelDestroyed'
     },
     render: function(){ … },
     attributeChanged: function(){ … },
     modelDestroyed: function(){ … }
});