Skip to content

about 数据绑定

也就是用data属性在html里指明绑定的

http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day

用 jQuery 的trigger和on来进行

表面体现:

某对象id有{attr_name1: val1, attr_name2: val2}

那么在dom上的体现为 <input data-bind-id=attr_name1 value=val1><input data-bind-id=attr_name2 value=val2>这样。

深层体现:

有两个trigger,一个是view的trigger(通过dom的输入操作),一个是data的tigger(通过data.set)。同时也有两个onmsg,一个是data trigger时用来同步改变view(简称onmsg.view),另一个是view trigger时用来同步改变data(简称onmsg.data)。。

DataBind(id)函数:

定义pubSub: 一个空$({})。目的:为了trigger和监听。

定义msg: id:change

定义data_attr: bind-id。

在html上监听任何冒泡的 产自data-data_attr的dom内容变化 =>

监听到后 pubSub trigger name为msg value为[data-data_attr的值,dom新内容] 的事件

=> 目的:view改变时对应改变数据的值

pubSub.onmsg => 在这项监听回调中处理view,将对应dom的值修改为新值

=> 目的:数据改变时对应改变view里的值

return pubSub。

自定义User(id)构造函数:

定义bind: 为new DataBind(id)。

定义user: 包括了数据本身,set,get及一个内部的bind。

数据本身:user.attributes : {}

get(attr_name): 返回this.attributes(attr_name)就好。

set(attr_name): 手动调用bind.trigger 注意这里的value要除去以上两项常规后新加一个this!!

=> 目的: 去上面onmsg去改变view的值。同时加上this, 因为底下onmsg.data里需要判断发起者是不是user。因为如果本就是user.set改变的数据的值,而监听时代码又通过user.set将数据值改成了刚自己改的值,user.set又trigger了底下的onmsg...就会无限循环overflow的!

这里需要特殊处理的根源就在于onmsg.data里又需要用user.set去改变数据的值!

呃ps: 我突然发现。。onmsg.data里不用判断发起者也是完全可以的阿。。只要不通过user.set(attr_name, val)来设置新值 直接设置user.attributes.attr_name = val不就好了。。

bind.onmsg => 这里改变数据对应的值!

pps: 我感觉以上两个函数完全可以整合成一个阿…而且User的命名也很具有歧义。毕竟这里的User在我看来毫无意义 需要绑定的数据一项就是一项 又无需分类别的。

使用:

var user = new User(123);
user.set('name', 'boom');

// <input data-bind-123="name"/> 

ps:

关于obj的set 如果现值和原值一样 则不会再次触发set事件。同html内容的change一样。

那如何避免监听中 view变化->再次触发view变化 或是 data变化->再次触发data变化 这样子的情况呢

=> 唔 不会这样的 没有变化就不会触发

pps:

我真是太棒噜!总结出了有domPubSub和objPubSub两种方式!

都很好用!