在使用knockout的同时也遇到了一系列的问题，在此一下总结，并且日后会持续的更新与跟踪。
view model 绑定问题
- view model只能在一个dom节点上绑定，换句话说，如果一个dom节点上绑定了viewmodel那么其内部子节点就不能再绑定任何的viewmodel
- 可以使用ko.cleanNode($("#test").get(0));方法来解除绑定
- 如果一个dom节点上绑定了viewmodel，当删除这个dom节点时，相应的绑定viewmodel绑定也会消失。但是原有的viewmodel引用还会继续缓存在页面中，如果要继续使用这个引用，必须要重新对viewmodel实例化。
组件（自定义标签）绑定问题
- 组件中使用subscribe出现了重复绑定现象。主要的原因在于重新使用viewmodel进行绑定时没有对viewmodel进行初始化，同viewmodel绑定问题的3类似。看如下例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
<script type="text/javascript" src="js/jquery1.11.1.min.js"></script>
<script type="text/javascript" src="js/knockout-3.4.1.js"></script>
</head>
<body>
<button type="button" name="button" onclick="removeInit()">remove and init</button>
<button type="button" name="button" onclick="removeRander()">remove and rander</button>
<div id="app"></div>
<script type="text/javascript">
ko.ob = ko.observable;
ko.oba = ko.observableArray;
function removeRander(){
var template = '\
<div id="test">\
<div data-bind="component: {\
name: \'list-container\',\
params: {listArray:userList}\
}"></div>\
<div data-bind="component: {\
name: \'list-container\',\
params: {listArray:userList}\
}"></div>\
<button type="button" name="button" data-bind="click:clickEvent">click me</button>\
</div>';
$("#app").empty();
$("#app").html(template);
}
function removeInit(){
var template = '\
<div id="test">\
<div data-bind="component: {\
name: \'list-container\',\
params: {listArray:userList}\
}"></div>\
<div data-bind="component: {\
name: \'list-container\',\
params: {listArray:userList}\
}"></div>\
<button type="button" name="button" data-bind="click:clickEvent">click me</button>\
</div>';
if($("#test").length > 0){
ko.cleanNode($("#test").get(0));
}
$("#app").empty();
$("#app").html(template);
// vm = new ViewModel(); 此处##### 如果这个地方不重新对viewmodel进行实例化，就会出现组件内部属性监控实现绑定多次的现象
setTimeout(function(){
ko.applyBindings(vm,$("#test").get(0));
},1000);
}
ko.components.register('list-container',{
viewModel: function(params) {
var _this = this;
var listArray = _this.listArray = params.listArray;
_this.delClickEvent = function(data){
// console.log(data)
listArray.remove(data);
}
listArray.subscribe(function(newArray) {
console.log(newArray);
});
},
template:
'\
<div>parentName:<span data-bind="text:name"></span></div>\
<ul>\
<!-- ko foreach:listArray -->\
<li data-bind="attr:{itemId:id}">\
<span data-bind="text:name"></span>\
<a data-bind="click:$parent.delClickEvent" href="###">x</a>\
</li>\
<!-- /ko -->\
</ul>'
});
var ViewModel = function(){
this.userList = ko.oba([{
id:1
,name:ko.ob("wenquan")
},{
id:2
,name:ko.ob("wangxueshi")
}]);
this.clickEvent = function(){
this.userList.push({id:3,name:'jack'});
}
};
var vm = new ViewModel();
</script>
</body>
</html>
网友评论