backbone1.0.0 — March 20, 2013API学习（Backbone.View）

最新推荐文章于 2022-04-24 22:50:09 发布

bigGuo

最新推荐文章于 2022-04-24 22:50:09 发布

阅读量1k

点赞数

分类专栏： web前端技术-backbone

本文链接：https://blog.csdn.net/big_guo/article/details/9701569

版权

web前端技术-backbone 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Backbone.View

constructor/initialize

当创建一个视图时，传递的参数结合视图的默认参数作为this.options给视图，以备以后的引用。有几个特殊的参数传参时会直接赋给视图：model，colle，el，id，className，tagName，attributes。如果视图View有定义initialize方法的话，initialize方法会在视图创建时就被调用。如果需要创建一个引用已经存在的DOM元素的视图View，那么可以把元素作为参数传递：

new View({
    el:existingElement
}).

eg:

 var doc = documents.first();
 new DocumentRow({
     model:doc,
     id:"document-row-"+doc.id
 });

el

所有的视图都会有一个DOM元素（el属性），无论该元素是否插入到页面。这样的话，视图可以在任意时候被渲染，然后立即插入到DOM中，这样就能够以尽可能少的reflows和repaints达到高性能的UI渲染。如果有指定，this.el根据tagName, className, id and attributes属性创建。如果没有，el会是一个空的div。
eg:

var ItemView = Backbone.View.extend({
  tagName: 'li'
});
var BodyView = Backbone.View.extend({
  el: 'body'
});
var item = new ItemView();
var body = new BodyView();
alert(item.el + ' ' + body.el);

$el

视图元素的缓存对象。更便捷的引用方式取代总是re-wrapping DOM元素

eg:

view.$el.show();
listView.$el.append(itemView.el);

setElement

如果需要将视图应用于别的DOM元素，使用setElement方法可以创建缓存引用$el，并将视图的委托事件一同"复制"。

$(jQuery)

如果页面中引入了 jQuery ，每个视图都将拥有 $ 函数，可以在视图元素查询作用域内运行。如果使用该作用域内的 jQuery 函数，就不需要从列表中指定的元素获取模型的 ids 这种查询了，我们可以更多的依赖 HTML class 属性。它等价于运行：$(selector, this.el)。
eg:

ui.Chapter = Backbone.View.extend({
  serialize : function() {
    return {
      title: this.$(".title").text(),
      start: this.$(".start-page").text(),
      end:   this.$(".end-page").text()
    };
  }
});

render

render默认无操作
render 默认实现是没有操作的。重载本函数可以实现从模型数据渲染视图模板，并可用新的 HTML 更新 this.el。推荐的做法是在 render 函数的末尾 return this 以开启链式调用。
eg:

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

Backbone 并不知道开发者使用何种模板引擎。 render 函数中可以采用拼字符串，或者利用 document.createElement 创建 DOM 树等等。但还是建议选择一个好的 Javascript 模板引擎。 Mustache.js, Haml-js, 以及 Eco 都是很好的选择。因为 Underscore.js 已经引入页面了，所以如果倾向于简单的js风格模板的话，_.template 可以使用并是一个很好的选择。

无论基选择哪种模板，都永远不要在 Javascript 中拼接 HTML 字符串。

remove

用于移除DOM树中的一个视图，并调用stopListening来解除视图listenTo的所有绑定事件。

delegateEvents（事件委托）

用 jQuery 的on函数来为视图内的 DOM 事件提供回调函数声明。如果未传入 events 对象，使用 this.events 作为事件源。事件对象的书写格式为 {"event selector" : "callback"}。回调函数可以是是一个函数名，也可能是直接的函数体。如果省略 selector ，那么事件就被绑定到视图的根元素（this.el）。默认情况下，delegateEvents 会在视图的构造函数内被调用，因此如果有 events 对象，所有的 DOM 事件已经被连接，并且我们永远不需要去手动调用本函数。

events 属性也可以被定义成返回 events 对象的函数，这样让我们定义事件，以及实现事件的继承变得更加方便。

视图渲染时使用 delegateEvents 相比用 jQuery 向子元素绑定事件有更多优点。所有注册的函数在传递给 jQuery 之前已被绑定到视图上，因此当回调函数执行时，this 仍将指向视图对象。当 delegateEvents 再次运行，此时或许需要一个不同的 events 对象，所以所有回调函数将被移除，然后重新委托 — 这对模型不同行为也不同的视图挺有用处。

搜索结果页面显示文档的视图看起来类似这样：

var DocumentView = Backbone.View.extend({

  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  },

  open: function() {
    window.open(this.model.get("viewer_url"));
  },

  select: function() {
    this.model.set({selected: true});
  },

  ...

});

undelegateEvents

Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

用于移除视图的所有委托事件。如果需要使视图不可用或者移除都可以使用这个