wex5 教程 之 图文讲解 bind-css和bind-sytle的异同

wex5作为网页开发利器，在前台UI数据交互设计中大量使用了绑定技术，即官方视频教学中也提到了KO,实质是数据绑定与追踪。在前台组件的属性中，为我们提供了两个重要的样式绑定属性，bind-css和bind-style.这两个属性都能动态的为组件或元素绑定样式，那么含义和用法有什么异同呢？

先来看两个例子：

一..bind-css案例：

组件属性设置:

css样式对像：

bind-css含义：  为组件或元素绑定样式对像，注意是样式对像，所以在css样式文件中要创建样式对像；

bind-css格式：1，json形式，用大括号；

2，左侧为样式对像名称，用单引号（绝对不能用双引号）；

3，右侧为执行样式对像条件，返回值为true或false,为true条件成立，执行该样式

4，右侧绑定方法可以是数据组件，也可以是可观察对像，也可以是变量

bind-css缺陷：根据判断条件，为元素动态绑定并执行样式对像。把思维扩展一下，我如果想根据某个值，为元素动态的执行某个样式属性如何实现呢?比如，我得到一个5，把5给了样式中的font-size，动态来改变样式中的字体大小怎么实现呢？或者根据拾色器动态得到一个color值，如何动态改变样式中的color值呢？很多朋友会说，你用css表达式获取js对像值，来动态执行就可以了。是的，这种方法可行，效果如下：

这种方法经测试，确实可行，带来了更复杂的问题:

一.是浏览器的兼容问题，可能在某些浏览器上执行不了;

二 是性能能问题，在css对像中执行了expression表达式，一个属性还好，如果有100个多样式动态执行呢？有人会说不可能有那么多属性，举个反例，我在字幕设计界面，文字所有属性都要动态改变并监控样式，颜色，字本，大小，宽高，缩进，行高，背景，等等，估计还没开发，就死到页面了。

显然，bind-css不能实现我的效果，那么，wex5为我们提供了另外一个属性，bind-sytle,弥补了动态样式绑定的不足。

二.bind-style案例：

先看效果：

我的意图，通过下拉字体大小选择框，选出字号大小，让span里的文字动态并实时改变相应的font-size .样式绑定方法如下：

图中color和size,为变量，其实是引入了可观察变量，引入方法如下：

bind-style含义：根据值，动态为元素执行样式属性；

bind-style格式：1.json形式，用大括号，跟bind-css写法一样。

2.属性可以多个连用，中间用逗号分格。

3. 左侧为属性键，必须用单引号标注（绝对不能用双引号，跟bind-css语法一样）。

4.右侧为属性值，可以是data中取出的值，也可以是固定值。如何想用变量，那么变量要引入可观察对像。

5.可观察对像的意义，其实就是将一个变量赋于了绑定属性，供其它组件或元素进行绑定，类似于data绑定。绑定之后，可观察对像中的值可以通过绑定跟踪的方式，将变量中的值动态传输给绑定对像。上例中，color和size中的值动态传输给了span的color和size值。

6.可观察对像取值方法：XXX.get();

通过以上两个例子分析，可以得出：

1.bind-css,是绑定样式对像,而bind-style才是绑定样式。

2.bind-css需要预先有css对像，而fbind-style可以动态执行，执行方法更灵活，更利于UI设计。