【分享】WeX5的正确打开方式（3）——绑定机制-创新互联

 关键点：ko监控的是数组的状态，而不是元素本身的状态。也就是说当数组状态变化（增减元素）的时候会触发ko事件引起绑定对象的刷新，但数组内部元素的变化（如：值变化）则不被监控不能触发ko事件。例如：

 在控制台中使用原生方法将Luffy动态改成Lucy是不会刷新UI页面的，而使用ko的数组操作改动数组则会立即刷新页面，值得注意的是在刷新的时候，也会将之前的改动刷新出来（Luffy > Lucy）。也就是说其实js内存中的变量是已经改变了，但是还缺少一个刷新DOM的动作。这里大家可以看到，读取数组的方法是vm.list()[0]，因为list也是一个函数对象，执行返回值才是我们想要的list内容。同理，也可以通过 vm.list(["妹子","妹子","妹子"]) 这样的方式重置可观察对象数组，也能立即刷新UI。

如果需要将数组元素的改动也动态反应到UI上，需要将数组元素也设置为可观察对象，然后使用ko的方法改变数组元素值。注意，是使用ko的方法 list()[0]("Lucy")！

 操作可观察对象数组的方法有两类，一类是与原生js数组方法同名的：pop, push, shift, unshift, reverse, sort, splice，这一部分与js原生方法的用法和效果都一样，就不再赘述了。

另外一些方法是js中没有的，主要有以下几个：

remove(someItem) -- 删除所有值与someItem相等的元素项并将它们以数组形式返回，这里的意思就是说你可不能直接list.remove(0)来删除第一项，而是要用list.remove(list()[0]) 这种形式来删除。总而言之，传入的参数必须是元素项的值，可以用list()[0] 的形式，也可以直接输入值的字符串（比如“Luffy”这种）。

remove(function(item) { return item.age < 18;}) -- 删除所有age属性小于18的元素项并将它们以数组形式返回，这种用法跟平常的数组高阶函数没什么区别。Item作为高阶函数的参数传入，遍历数组时，当高阶函数返回值为真值时就删除该项，否则转到下一项。

removeAll(['Chad', 132, undefined]) -- 删除所有值与 'Chad' 或 123 或 undefined 相等的元素项并将它们以数组形式返回。

removeAll() -- 删除所有项并以数组形式返回。

小窍门：在处理可观察对象时，若对象数量众多而且交互频繁的情况下，每次变更都立即刷新的话会非常消耗性能，这个时候可以使用扩展 myObservableArray.extend({ rateLimit: 1000 }) 来设置延迟刷新。比如在不断往可观察对象数组中插入元素时，可以设置一个周期时间1000ms，让1000ms内的所有操作集中到一次刷新中去，避免频繁操作 DOM 带来的性能恶化。

WeX5中如何使用ko？

 WeX5作为Html5 开发工具界的翘楚，少不了集成优秀的ko框架，使用的方法非常简单：在可视化编辑器中指定组件的bind属性，然后在js代码中操作相应绑定值。

 先在可视化编辑器中指定：

 这种方法在hello world篇也有简单介绍，不熟悉的同学可以先去看看哈。通过可视化编辑器我们就可以绑定相应的属性或者事件了，这里我们为 bind-ref 绑定了一个字符串“hello world”，至于其他的属性和事件将在下一篇中介绍。绑定后我们打开代码编辑器，发现里面并没有出现1）那样的绑定代码。那绑定代码写到哪里去了呢？请打开HTML源码：

 可以看见代码中出现了“bind-ref='Hello World’”这个跟上文说的data-bind是不是很相似呢？这里WeX5将每个组件可以绑定的属性都添加到可视化编辑器中，这样就不用再去记某个组件可以绑什么属性了，鼠标指哪就绑哪！当然绑定字符串意义不大， 我们一般会绑定一个变量（实际上是返回值为所需变量的函数对象）。例如：

 这里绑定了text为myText，这种形式的绑定为直接绑定在model对象下的，所以可以在js源码中的Model下操作这个myText对象。

 1 define(function(require){  2   var $ = require("jquery");  3   var justep = require("$UI/system/lib/justep");  4  5   var Model = function(){  6     this.callParent();  7     this.myText = justep.Bind.observable("bind!");  8   };  9   Model.prototype.button2Click = function(event){ 10     this.myText.set("changed"); 11   }; 12   return Model; 13 }); 14

 可以看到ko组件已经被封装到justep的Bind对象里面去了，另外对可观察对象的操作也跟ko中有点不同，这里采用的是set/get分别来设置和获取可观察对象的值。其他诸如compute等大部分方法的用法跟ko中一致。

总结

 本篇主要简单介绍了WeX5中数据绑定的由来和背后的优秀框架（knockoutjs），着重介绍了ko中最重要的概念：可观察对象（数组），然后简单示范了如何在WeX5中使用绑定机制以及 WeX5中的绑定与ko中的差异点。

 关于可观察对象的简单介绍就到这里了，下一篇将具体介绍各种绑定的用法！码字不易，随手点赞哈~

参考资料：

1. ko官方教程：http://knockoutjs.com/documentation/introduction.html

2. WeX5绑定教程：http://docs.wex5.com/data-bind-instro/

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。