小试backbone

收到@liuda101的强烈推荐,最终还是看了一下backbone。也由于之前shunote的代码基本上是靠jquery堆出来的,完全用knockout重写,不太现实。看完果然发现,backbone确实什么也没做,但是帮你梳理了代码的思路,让代码变的更加清晰了。

View

Backbone的View的意思是一段显示的内容,即html通过模板构造,然后对其绑定事件。这对于SPA来说,还是很重要的。之前确实觉得绑定事件这种代码没地方放,放到业务逻辑模块感觉不对,单独放又与业务逻辑分不开,因为事件是Js运转的起点。下面是从官方demo todo删减出来的一段代码。

  Var AppView = Backbone.View.extend({
      el: $('#todoapp'),
      events: {
        "click #clear-completed": "clearCompleted",
        "keypress #new-todo": "createOnEnter"
      },
      initialize: function(){
        this.listenTo(Todos, "add", this.addOne);
        this.listenTo(Todos, "all", this.render); //所有发生的事件都会触发
      },
      render: function(){
        // 重新渲染视图
        this.footer.html(this.statsTemplate({done: done, remaining: remaining}));
      },
      addOne: function(){
        var view = new TodoView({model: todo});
        this.$("#todo-list").append(view.render().el);
      },
    })

 

很清晰的一段代码。el代表这个View的最外围的元素,这里就是说页面上已经有这个元素了。如果没有需要稍稍换一种方式声明。events就是绑定元素内其他元素的事件。initialize是初始化,在View实例化的时候可以调用,在这里面Listen to 数据Model的变化,

注意,数据Model变化也是“事件”,所以是Listen to,但是不是界面事件,而是数据变化事件。View需要和数据变化保持一致,所以View要listen to models

那么,数据是怎么变化的呢?当然还是界面事件导致的(input)。因此,在View的events里定义的事件,就用来listen to 界面变化,这里的事件处理函数,会改变models。

View做了什么?

也就是说,View做了两件事,

  1. 当用操作界面时,改变model ——view是攻
  2. 当model改变时,更新界面。 ——view是受

是不是很晕?那就对了,因为MVC在这里其实不太好用。这里如果要梳理的更清楚,应该使用MVVM模型,参考Understanding MVVM – A Guide For JavaScript Developers

  • ViewModel: 界面数据模型(界面事件产生时,更新ViewModel,它对界面上展示的数据建模)
  • View 需要被model同步的界面(上面的受,knockout的data-bind),同时把界面事件events通知给ViewModel(攻ViewModel)
  • Model 真正的数据模型,ViewModel相当于封装了Model,把需要展示的部分暴露出来,Model藏在ViewModel的后面。

剩下的部分

继续Backbone,

Model和Collection了,模型和模型数组,没啥好说的,大家都差不多。

Router,这个是特色,帮你管理URL。具体的没看,不过写过SPA的应该都猜的出来,不同的url做不同的事嘛,构造和解析嘛。

Sync,帮助你将数据持久化,就是ORM的部分,搞定后台,REST接口。

Backbone带来的一系列小福利。

哦了。

One thought on “小试backbone

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>