本文简要讨论了底板.View类通常是如何使用的,然后介绍一个新的类,有助于轻松同步模型和视图。

backbone.view类有助于您做几件重要的事情’LL非常简要讨论:(我假设您已经熟悉了Backbone.views)

  • 创建浏览器 dom 元素
  • 听DOM元素事件
  • 听取模型事件

创建浏览器DOM元素:

backbone.view对象具有默认视图,即DOM元素。默认情况下’s a <div>但是,您可以覆盖它是您想要的任何类型的元素。通常,view.render()函数’■主要工作是使用构成视图的DOM元素来填充视图。

视图还具有一个视图。$ EL功能仅适用于$ for $(View.el)。在下面的示例中,渲染函数仅创建一个输入的DOM元素并将其附加到视图中’s el property –这只是一个div。此时,浏览器中的任何内容都不会呈现。调用函数可能会在浏览器中的某处添加视图.el属性’SOM将其实际上显示为用户。

  render: function() {
    this.$el.html('Enter your name: <input type="文本"/>);
    return this;
  }

在几乎所有的情况下,你赢了’t在您的视图类内联输入您的HTML。相反,你’LL具有单独的HTML文件,即HTML模板。然后将HTML模板传递给underscore.js 模板功能 可以通过解释的参数和具有注入的变量值的HTML传递参数,然后返回为DOM元素呈现。

听DOM元素事件:

backbone.view类允许您定义一个事件哈希。事件哈希的键是jQuery事件,后跟jQuery选择器。事件散列的值是在提出事件时调用的函数调用返回。

事件被定义为jQuery代表。这很好,因为代表是一个相当有效的事件机制,也是动态的。当您的View.el内容被交换出来时,jQuery代表们唐’需要刷新。

听取模型事件:

backbone.view类通常会侦听它’S模型更改,然后调用View.render()函数,如下所示。

SomeView = Backbone.View.extend({    initialize: function(){
    this.model.on('change', this.render, this);
  }, 

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

 

典型的骨干视图代码问题:

对于较小的应用,上述方法运行良好。特别是在这些类型的情况下:

  • 应用程序’s models don’t change very often
  • 应用程序’S页面经常从服务器的划痕刷新
  • 模型’s aren’T在不同视图之间分享

随着应用程序变得更加复杂,调用渲染()太多时间可能是浪费的。旧的DOM元素刚刚抛弃。此外,您通常在页面上有许多只读或可编辑字段,手动将其拆除可能是对接中的疼痛。当您在模型存储数据和视图如何使数据之间有特殊格式或转换时,生命变得更糟。

从模型的视图中移动数据可以用散装块进行,如jQuery SerializeArray. 功能,但这赢了’当您想要立即更新的其他可见视图而不是某些提交时,T是理想的。 SerializeArray没有’T任何机制允许您将视图格式转换为模型格式。

ModelBinder:

模型Binder类旨在使您可以更轻松地将视图和模型同步。它消除了上述一些问题。当一个观点’S模型变化,整个视图是’t重新渲染。相反,刷新各个元素以具有当前的模型值。当一个观点’S元素更改,更新了相应的模型属性。

模型Binder类具有以下公共功能:

// no arguments passed to the constructor
constructor();

// model is required, it is the backbone Model your binding to
// rootEl is required, is the root html element containing the elements you want to bind to
// bindings is optional, it's discussed a bit later
bind(model, rootEl, bindings);

// unbinds the Model with the elements found under rootEl - defined when calling bind()
unbind();

通常,ModelBinders将如下所用:

SomeView = Backbone.View.extend({ 
 initialize: function(){ this._modelBinder = new Backbone.ModelBinder(); }, 
 render: function(){ this.$el.html(this.template()); this._modelBinder.bind(this.model, this.el); }, close: function(){ this._modelBinder.unbind(); } }); 

 

通常,视图将抓住模型粘合剂实例,因为视图关闭时应调用Unbind()。否则你’ll最终与僵尸视图唐’t die –如果您刚刚依赖传统的模型更改事件,您会有相同的问题。风景’s渲染()函数只需要调用一次。模板()函数不需要传递任何参数,因为ModelBinder将在View.el下将正确的模型属性注入相应的DOM元素内。

在上面的示例中,绑定()函数’S 3RD参数未定义。当绑定参数为空时,ModelBinder将在rootel下面定位所有子元素(递归),其中包含一个“name”属性定义。对于每个发现的元素,元素’s name属性将绑定到模型’s attribute.

所以,一个rootel’s child element :  <input type=”text” name=”phone”/>将绑定到模型。电话。

ModelBinder绑定参数:

绑定()函数的第3个参数应按照此语法:

// Key: a model attribute         Value: a jQuery selector
{  phone:                         '[name=phone]' }

在上面的示例中,模型.phone.phone与等于的名称属性双向对DOM元素绑定到DOM元素“phone”。 jQuery选择器可以是任何有效的jQuery选择声明。 ModelBinder仅预期返回单个DOM元素–多个元素可以。

默认情况下,DOM元素’s text或html绑定到模型(取决于DOM类型),但您也可以使用以下示例绑定到下面的示例中的任意DOM元素属性“elAttribute” option:

// Key: a model attribute         Value: an element binding definition
{  isAddressEnabled:              {selector: '[name=address]',  elAttribute: 'enabled'} }

 

您还可以使用a格式化/转换绑定值“converter”选项如下所示:

// Key: a model attribute         Value: an element binding definition
{  phone:                         {selector: '[name=phone]', converter: phoneConverter }  }

上面示例中的Phoneconverter是ModelBinder在将模型复制到视图或视图到模型的视图时将调用的函数。转换器通过4个值,如下所示。

电话Converter: function(direction, value, attributeName, model){ ... }

方向是ModelToview或ViewTomodel。转换器可以存在于您的模型实例上,也可以是某些通用实用程序功能’s将模型作为参数传递。对于只读元素,您可以忽略方向,因为它’始终是ModelToview。

你可以使用“elAttribute”选择和“converter”选项创建绑定时。这“converter”在之前援引“elAttribute” value is set.

元素也可以定义为阵列,如下所示:

// Key: a model attribute         Value: an array of element binding definition
{  phone:                         [{selector: '[name=phone]'}  {selector: '#phone'}] }

在上面的示例中,我们将Model.phone绑定到具有手机名称的DOM元素和具有电话ID的DOM元素。

由于您可以明确定义绑定范围,因此您可以执行嵌套骨干视图的内容。即使视图具有具有相同名称的DOM元素。您还可以使用ModelBinder作为局部视图模型绑定解决方案,但仍然具有ModelBinder可以的真正复杂的情况的自定义逻辑’t handle.

如果对您有用的声音,您可以在这里尝试:

//github.com/theironcook/Backbone.ModelBinder