在使用knockout的同時也遇到了一系列的問題，在此一下總結(jié)，并且日后會持續(xù)的更新與跟蹤。
view model 綁定問題
- view model只能在一個dom節(jié)點上綁定，換句話說，如果一個dom節(jié)點上綁定了viewmodel那么其內(nèi)部子節(jié)點就不能再綁定任何的viewmodel
- 可以使用ko.cleanNode($("#test").get(0));方法來解除綁定
- 如果一個dom節(jié)點上綁定了viewmodel，當(dāng)刪除這個dom節(jié)點時，相應(yīng)的綁定viewmodel綁定也會消失。但是原有的viewmodel引用還會繼續(xù)緩存在頁面中，如果要繼續(xù)使用這個引用，必須要重新對viewmodel實例化。
組件（自定義標(biāo)簽）綁定問題
- 組件中使用subscribe出現(xiàn)了重復(fù)綁定現(xiàn)象。主要的原因在于重新使用viewmodel進(jìn)行綁定時沒有對viewmodel進(jìn)行初始化，同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進(jìn)行實例化，就會出現(xiàn)組件內(nèi)部屬性監(jiān)控實現(xiàn)綁定多次的現(xiàn)象
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>
