一 前言:
wex5官方教程里，开篇即以一个input输入，output即时输出的例子，为我们展现了一个概念：可观察对象。在以后我的项目开发中，将大量运用可观察对象。
那么，问题来了：
1. 可观察对象是什么？
2. 可观察对象能干什么？
3.可观察对象能代替哪些工作?具有哪些优势？
4 可观察对象的绑定机制与实际运用技巧如何实现？
为了大家了解绑定技术在web开发中的重要性，看明白我此后更深层次的运用,今天，我先以我用wex5设计的的视频字幕机来说明，没有可观察对像，字幕机的制作，几乎无从谈起，用了可观察对象的绑定机制，居然代码都不用写。
废话少说，看实例。
二 设计需求：
设计需求如下：
1 后台字幕设计器界面，通过右侧操作，左侧视频屏幕上的文字实时响应操作
2 响应内容包括：内容，字体，颜色，背影，透明度，字间距，行间距，字号等。
3 设计好后，将文字相关属性保存到数据库，客户端进行视频播放时，实时接收后台设计的广告字幕内容
三 实现思路：
先抛开今天的技巧，我们先思考，如何实现上述设计需求呢？
1 js方法
想都不去想，这么多参数，让js去取值再赋值，还得找到元素，还得控制触发事件，增减监听事件来监听对像。我的天哪，几个参数还可以，这么多参数？？还得控制css样式，高手也许能实现，估计一个月能写完，也能测试成功，估计出错了也别想改回来，代码量太大了
2 baasdata绑定
这种方法很好。可惜，这里用到了非wex5组件，color，其它还有很多，比如video,audio,总之，html5还有一半的元素没有集成在wex5的组件库中，你就是绑定到baasdata,也不能满足复杂的页面需求啊。
那怎么办呢？
难道我这个web版的字幕设计器不能完成了吗？
答案当然是肯定的，就是开篇提到的可观察对象集群应用与绑定技术。
四 组件创健与代码实现
1 非wex5组件与属性的创建
在源码合适位置手动添加： <input type="color" id="textID" bind-value="textColor"/>，创建输入类型，color
点击“添加自定义属性”，创建bind-value属性。神奇，就这样加一个bind-value属性，color的值，就可以绑定到其它对象上。今天，把color的颜色值绑定到可观察对象上。
这里只用到了color,其它非wex5元素或组件创建方法相同。
2 文字属性数据库字段
3 前端baasdata
4 创建所有属性相对应的可观察对象
5.将页面组件的值绑定到可观察对象
同理，将所有组件的bind-value的属性值里写上相对应的可观察对象名称，组件的值，无论如何发生变化，可观察对象的值都会与之绑定。举例就是，color拾色器，我点击后选择了黑色，那么color的值将同步到textColor的值里去。
运用此种方法，所有组件的值，都绑定到了可观察对象中，接下来，就是取出可观察对象的值，再绑定到text中的样式中去。
6 将可观察对象的值取出，用text的bind-style方法绑定到text的样式中
就一句话
至此，操作字幕机右侧，视频上的字幕就实现了同步。
这么简单？？就这么简单？？？
是的，就这么简单。
那我为什么讲了这么多废话？就是为了让大家明白，可观察对象与绑定技术在web开发中的重要性与优势。
正是因为这个字幕机的设计实现不了，太复杂，才回归到原点重新思考。
大家学技术，更要学会思考问题的方法。
给大家提示一下：
之前用js做过元素托拽，如果用坐标绑定来实现呢？？？？真是简而又简。
五 总结：
1 绑定技术是实现优秀web设计的核心思想
2 思路越简单，代码越复杂；思路越高深，代码越简单。本例中居然一行代码没写，只是创建了可观察对像。
3 不能局限于wex5,放开思维，想想wex5没有的东西，如何导进来，巧妙的运用wex5的框架基础与绑定技术。
相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251
扫描二维码，看高清教学视频。