Backbone基础(二):视图(View)

无主题博客 » 前端开发 » Backbone » Backbone基础(二):视图(View)

Backbone中的View用来反应的APP中的Model的样子。它们会见厅事件并做出相应的动作。或者说它们包含着模型里的展示逻辑,用于展示给用户。视图使用 JavaScript模版完成这一功能(如Underscore微模版、Mustache、jQuerytmpl等)。视图的render()方法可以绑定在模型的change()事件上,不需要重新刷新整个页面,就可以使视图即时反应模型的变化。

创建视图

创建新视图很简单,和创建模型类似。简单的扩展一下Model.View就可以创建一个新视图。下面是一个创建视图的小示例:

var MyView = Backbone.View.extend({
  tagName: 'li',
  
  myTpl :_.template("一个示例模版"),

  events: {
    'click label' : 'edit',
    'keypress .edit' : 'updateOnEnter',
    'blur .edit' : 'close'
  },

  render : function(){
    this.$el.html( this.myTpl(this.model.toJSON()));
    this.input = this.$('.edit');
    return this;
  },

  edit: function(){
    //...
  },

  close: function(){
    //...
  },

  updateOnEnter: function(){
    //...
  }
});

var myView = new MyView();
console.log(myView.el); //<li></li>

el属性

el是View的一个核心属性,所有视图都拥有一个DOM元素(el属性),即使该元素仍未插入页面中去。视图可以在任何时候渲染,然后将所有的内容一次性插入到DOM里,是页面渲染更快,因为浏览器执行了最小次数的重排和重绘。

有两种方式可以将DOM元素与视图相关联:为视图创建一个新的元素,随后将它添加到DOM里;用页面已经存在的元素给视图做一个引用。

如果想对一个视图创建一个新的元素,可以在视图上对下面的属性做任意组合的设置:tagName、id和className。tagName如果不指定的话,默认为div。

前面的示例中由于tagName设置了li,所以结果是创建了一个li元素;下面这个示例将创建一个带有id属性和class属性的ul元素。

var MyView = Backbone.View.extend({
  tagName : 'ul',//指定元素(标签)名字
  className : 'container',//指定样式名字
  id : 'myview'//给标签设定一个id
});

var myView = new MyView();
console.log(myView.el); //<ul id="myview" class="container"\></ul>

上述代码创建了一个DOM元素,但他并没有福佳到视图的DOM元素上。

如果元素在页面上已经存在了,可以为el设置一个CSS选择器来匹配元素。

el: '#footer'

或者在创建视图的时候,将el设置在现有的元素上:

var myView = new MyView({el:$("#footer")});

1.\(el和\)()

视图中的逻辑经常需要在el元素和其嵌套的元素上调用jQuery或Zepto的函数。通过定义\(el属性和\)()函数,Backbone将使这一切变得简单。视图的.\(el属性等价于\)(view.el),.\((selector)等价于\)(view.el).find(selector)。在文章开头的例子中的render方法中,我们看到了this.\(el用于设置元素的HTML,而this.\)()在用于查找class为edit的子元素。

2.setElement

如果想将现有的Backbone视图应用于另外一个不通的DOM元素,可以使用setElement。重写this.el需要同时更改DOM引用和在新元素上重新绑定事件。

setElement将创建一个缓存$el引用,并且将事件从旧元素委托给新元素。

var btn1= $('<button></button>');
var btn2= $('<button></button>');

var MyView = Backbone.View.extend({
  events: {
    click: function(e){
      console.log(myView.el === e.target)
    }
  }
});

//创建一个视图实例,并应用到btn1上
var myView = new MyView({el:btn1});

//用setElement方式将视图运用到btn2上
myView.setElement(btn2);
btn1.trigger('click');
btn2.trigger('click');//true

el属性表示的是视图即将渲染展示的页码标记。为了让视图能在页面上渲染,需要将视图作为新元素添加到页面上,或者将视图附加到一个页面现有的元素上。

var view = new Backbone.View;
view.setElement('<p><a><b>test</b></a></p>');
view.$('a b').html(); //outputs "test"

3.render()

render 默认实现是没有操作的。 重载本函数可以实现从模型数据渲染视图模板,并可用新的 HTML 更新 this.el。 推荐的做法是在 render 函数的末尾 return this 以开启链式调用。这种模式允许我们将该视图作为子视图进行重用,也可以使用它在渲染之前进行与渲染。

4.Events

Backbone的events允许我们为el相关的自定义选择器或者直接为el本身添加事件监听器。事件采用的是'eventName selector' : 'callbackFunction'这样的key-value对的形式,并且支持大量的DOM事件类型,包括click、submit、mouseover、dblclick等。

var MyView = Backbone.View.extend({
  tagName : 'li',

  events : {
    'click .toggle' : 'toggleCompleted',
    'dbclick label' : 'edit',
    'click .destory' : 'clear',
    'blur .edit' : 'close'
  },
  //....
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注