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>