MVVM控制器

上述范例中我们使用了控制器来操作数据，例如

上述代码中的value即为控制器。

控制器的作用是定义了数据模型Model中的数据属性如何与HTML视图元素(View)进行关联，使数据模型中数据的变化以控制器定义的方式来控制View的改变，同时使View中用户的输入来更新数据模型中的数据。

例如value控制器用于当数据属性变化时来变更DOM元素的view属性，同时当用户变更了元素的value时，自动更新数据模型中的数据。

我们常用的控制器包含如下几种

1、text

text控制器是用于完成数据模型的数据属性与DOM元素的text属性的单向绑定，用于在数据属性变化时修改DOM元素的text。等价于

$(元素).text(数据属性)。

如果元素使用contenteditable属性，那么数据属性也会随着内容的修改而变化。

2、value

value控制器是用于完成数据模型的数据属性与DOM元素的value属性的单向绑定，用于在数据属性变化时修改DOM元素的value或者当元素value变化时变更数据属性。等价于

$(元素).val(数据属性)

数据属性=$(元素).val( )。

3、html

html控制器是用于完成数据模型的数据属性与DOM元素的html属性的单向绑定，用于在数据属性变化时修改DOM元素的html。等价于

$(元素).html(数据属性)。

4、toggle

toggle控制器是用于完成数据模型的数据属性与DOM元素显示状态的单向绑定，用于在数据属性变化时显示或隐藏DOM元素。等价于

数据属性?$(元素).show():$(元素).hide()。

5、attr

attr控制器是用于完成数据模型的一个或多个数据属性与DOM元素的一个或多个属性值的单向绑定，用于在数据属性变化时修改DOM元素的属性。写法如下

data-bind:attr:{‘属性名1’:数据属性1,’属性名2’:数据属性2}

等价于

$(元素).attr(属性名1,数据属性1)

$(元素).attr(属性名2,数据属性2)

6、for

for控制器用于对数据模型Model中的数组属性进行循环处理的控制器。例如如下范例

上述代码中可以看到我们定义了一个数据模型Model它包含一个数组items，里面包含了多个字符串元素。在DOM对象里面我们使用for:items进行循环处理，把内部的元素与数据进行组合。得到如下效果

这里需要注意两个点：

●由于数组items中没有为数据指定名称，因此我们可以直接在span元素中使用value作为数据属性名称。如果数组中包含的是JSON对象，那么我们可以直接使用JSON对象的名称。

●由于span元素定义的数据属性是从属于items数组，因此我们需要使用mvvm-scope属性对包含的子元素进行分隔，设定其子元素的数据作用域。mvvm-scope属于作用域属性，我们可以用在所有需要使用DOM模版元素的地方。例如上面的span即为一个dom模版，他会根据数据的条数自动复制。

7、checked

checked控制器用于对数据模型Model中的数据属性与DOM对象中CheckBox和RadioBox元素进行关联。当数据变化时会自动变更checkbox和radiobox的选中状态，当checkbox和radiobox产生变化时也会影响Model中的数据属性。

8、classes

classes控制器是用于完成数据模型的一个或多个数据属性与DOM元素的一个或多个class类的单向绑定，用于在数据属性变化时开关DOM元素的class类。写法如下

data-bind:classes:{‘类1’:数据属性1,’类2’:数据属性2}

等价于

数据属性1?$(元素).addClasses(类1):$(元素).removeClasses(类1);

数据属性2?$(元素).addClasses(类2):$(元素).removeClasses(类2);

9、css

css控制器是用于完成数据模型的一个或多个数据属性与DOM元素的一个或多个css样式的单向绑定，用于在数据属性变化时调整DOM元素的css样式。写法如下

data-bind:css:{‘样式1’:数据属性1,’样式2’:数据属性2}

等价于

$(元素).css(样式1，数据属性1);

$(元素).css(样式2，数据属性2);

10、disabled & enabled

disabled控制器是用于完成数据模型的数据属性与DOM元素的disabled状态关联。当数据属性为true时，元素将会变为disabled。

enabled控制器正好与disabled相反。

disabled等价于

$(元素).attr("disabled",数据属性);

注:AppCan采用Backbone+Epoxy作为MVVM框架的基础来进行扩展，框架中所支持的控制器包含但不限于Epoxy提供的控制器。

11、collection

colleciton控制器是用于处理Collection模型集合的控制函数，他通过对Collection进行循环，建立DOM对象包含的子元素和Collection中的每个数据模型的数据关联。同时会监听collection模型集合的增加、删除事件，自动完成界面元素的增加和删除。collection和for的最大区别在于for用于model中的数组元素，而这种元素不会单独进行更新，而是随着model的变化统一进行变化，数组的长度也不是很长。而collection处理的是有model组成数组，这个数组会随着用户的操作动态扩大或减小。