Backbone return this;

最新推荐文章于 2024-11-28 21:01:55 发布

原创最新推荐文章于 2024-11-28 21:01:55 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#backbone

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何在Backbone.js中通过return this实现视图的复用及预渲染功能，展示了具体的代码示例，并对比了使用与不使用return this的区别。

var ItemView = Backbone.View.extend({
  events: {},
  render: function(){
    this.$el.html(this.model.toJSON());
    return this;
  }
});

这里return this;的作用：可以让我们把ItemView作为子view重复使用。我们也可以利用它在呈现之前做预渲染（pre-render）。
重复使用ItemView的例子：

var ListView = Backbone.View.extend({
  render: function(){

    // 假定items是model暴露的需要呈现的list
    var items = this.model.get('items');

    // 使用Underscore的_each方法遍历每个item
    _.each(items, function(item){

      // 创建一个新的ItemView实例，传入指定的model项
      var itemView = new ItemView({ model: item });

      // itemView的DOM元素渲染之后追加到ListView的el中。
      // 这里'return this'可帮助在render之后访问到它的输出("el")
      this.$el.append( itemView.render().el );
    }, this);
  }

如果不使用return this; ListView需要这样写：

var ListView = Backbone.View.extend({
  render: function(){
    var items = this.model.get('items');    
    _.each(items, function(item){
      var itemView = new ItemView({ model: item });      
      itemView.render();
      this.$el.append(itemView.el );
    }, this);
  }