about 数据绑定
也就是用data属性在html里指明绑定的
用 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两种方式!
都很好用!