【分享】html5 开发工具——WeX5中的各种绑定方式 _wex5

今天整理一下 html5 开发工具——WeX5中的各种绑定方式，下面分为表现类、流程类、交互类 3 种类型分别介绍。
表现类绑定
表现类的绑定属性有、text、html、css、style、attr几种，除了css表示css的class之外，其他都是字面意思。示范用法：
布局中加入一个div标签和一个按钮，并设置div标签的绑定属性如下右所示。

文章插图

文章插图
这样设定好了绑定关系，然后在 js 中将各绑定属性设置为可观察对象，让其可以自动更新界面：

define(function(require){var $ = require("jquery");var justep = require("$UI/system/lib/justep");var Model = function(){this.callParent();this.canVisit = justep.Bind.observable(true);this.htmlCnt = justep.Bind.observable("add HTML element : ");this.myCls = justep.Bind.observable("div-one");this.myStyle = justep.Bind.observable({color: "blue", "font-size": "22px"});};Model.prototype.button2Click = function(event){this.myCls.set("div-two");this.htmlCnt.set('remove button, add link: link');this.myStyle.set({border: "none", "font-size": "14px"});};return Model;});

这里在 Model 构造函数里面初始化了各绑定属性，然后定义的点击事件，在其中改变绑属性值。效果如下：
这里为了演示我没有使用text绑定，text绑定只能显示字符，不能将标签显示出来。另外，text 和 html 绑定都是对内容进行修改，而同时修改内容会发生冲突，所以不能同时应用这两个绑定。
注意，因为 js 的变量命名中不能带 [ – ] （减号），所以引用带[ – ]的CSS类名时需要用引号包起来。style里面的内容也一样，这个也是JSON格式的要求了。
流程类绑定
流程类包括、if、ifnot、with绑定，if 和 ifnot 与类似，差别就是：if 会直接从DOM中移除相应的组件，而只是控制隐藏显示，组件还是在DOM里面的。with 跟 js 中的 with 也是一样的效果，就是延长了作用域链，简单的来说就是在变量前加了个’前缀.’ 。这里只介绍一下，其他绑定请参考wex5官网绑定教程。
顾名思义，是针对每一项进行操作的，一般用在对多组数据的绑定上。这次我们使用 html 原生的 ul 标签来做个示范：

文章插图
先往界面编辑器里面放入一个list，并在list里面放入3个span标签用于显示，设置list的 bind-为 items，然后分别设置3个span的 bind-text为 $index，，：

文章插图
再编写js如下：

define(function(require){var $ = require("jquery");var justep = require("$UI/system/lib/justep");var Model = function(){this.callParent();this.items = [{itemName: "JavaScript", creatTime: "Feb 10 2013"},{itemName: "HTML", creatTime: "Mar 21 2015"},{itemName: "CSS", creatTime: "May 13 2016"}];};return Model;});

效果：

文章插图
现在只是单纯的初始化数据，如果需要监视数据的变动，那就要用 this.items = .Bind.([{ : ……}])来将数组设置为可观察对象。
这里我们在list上设置为items，那么list下的子项和items下的子项就对应起来了，所以list子项的span就能直接绑定item子项里面的数据，这个跟js中的作用域是一样的。在使用时要注意作用域的层次，否则很容易搞乱。这里再给一个案例，通过这个案例应该可以很好理解绑定中的作用域范围了。