最近折腾一个五年前的项目,里面用了这个轻量级的mvvm框架
一堆坑,而且几乎是处于被抛弃的状态。。。这里就是记些用的过程中遇到的问题和自己的解决方法,不从深层去挖了~
具体使用方法可参考以下链接:
data-bind
-
一个元素不能写多次data-bind,即:
<div data-bind="" data-bind=""></div>
解析时后面的data-bind会被直接无视;也不能一个data-bind里绑定多个属性,如:<div data-bind="text:xxx;attr:{...}"></div>
会直接报错。所以,有时为了能绑定多个属性,必须额外写一堆没有用途的dom结构,只为了多写几个data-bind...
-
一个viewmodal如果是这样的结构:
var viewmodal={ data:ko.observable({});//data是个受监控的对象 }复制代码
那么视图层使用data-bind时,一定要这样写:
<div data-bind="text:data().xx"></div>
;而且,如果data的初始值为空,那么一定要在data-bind里做好相关判断!不然渲染时很容易出错,会影响后续原本正常的数据渲染 -
在 data-bind="foreach:xxx"的用法里,在这范围内的元素只能调用xxx数组里的属性;如果想要调用数组外的,记得用$parent
-
data-bind="click:xxx",如果该语句在一个foreach里,该xxx函数里的this是取不到viewModal的,而是循环的每一项。如果想要调用viewModal,请直接调用:
var viewModal = { word:'', test:function(){ viewModal.word = xxx; }}复制代码
另:而且函数入参e也不是所在元素绑定的相关属性,也是循环的每一项。
因为这个僵硬的设计,导致我不能将所有函数都放在viewModal里,有的还是得老老实实地用controller语法:
$('#xxx').click(function(){ $('#ttt').prop('class','aaa');})复制代码
-
foreach生成的元素是动态的,所以在这样的元素上绑定事件,请使用$(document).on('click','xxx',function(){...})
observableArray:
- 我们知道一个属性被监听,重写需要这样:observedData(xxx);数组也不例外,当然,你也可以使用改变原数组的一些方法操作,同样可被监听,如:push/pop/splice等
applyBindings
- 当在全局绑定数据时,js里只能出现一次该函数;如果是在不同范围内绑定,该函数想出现几次就几次
- 此函数必须位于代码最末尾