zoukankan      html  css  js  c++  java
  • Knockout的监控链一个小例子

    普通数组,与Knockout数组关联,Knockout数组与select元素关联。

    于是,你用Knockout内置函数,处理了Knockout数组,普通数组也随着改变,select元素随着改变。

    你改变了select元素,Knockout数组随着改变,普通数组随着改变。

    你通过内置函数改变了普通数组,Knockout数组改变, select元素改变。

    这就是MVVM,普通数组是Model,Knockout数组是View-Model,select元素是View。

    但是,你重新绑定了,就另当别论了。

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="knockout-2.0.0.debug.js"></script>
    <script type="text/javascript">
    $(
    function(){
        
        
    var testKo=function(){
            
    this.testArray=["1","2","3","4","5"];
            
    this.koArray =ko.observableArray([]);
            
    this.koArray(this.testArray);
            console.log(
    "knockout array is "+this.koArray());
            
    this.koArray(["6","7"]);//rebind
            console.log("normal array is "+this.testArray);//origin nomral array
            this.testArray.push("8");
            console.log(
    "knockout array is " + this.testArray);

            
    this.testArray = ["44"];
            console.log(
    "kockout array is "+this.koArray());
            
    this.testArray.push("55");
            console.log(
    "knockout array is " + this.koArray());

            
    //restart
            this.newArray = ["aa","bb","cc"];
            
    this.newKoArray = ko.observableArray(this.newArray);
            console.log(
    this.newKoArray());
            
    this.newArray.push("dd");
            console.log(
    this.newKoArray());
            
    this.newKoArray.remove("aa");
            console.log(
    this.newArray);

        }
        ko.applyBindings(
    new testKo());
    })
    ;
    </script>
    </head>

    <body>

    </body>
    </html>

    合乎自然而生生不息。。。
  • 相关阅读:
    【2018.10.3】万圣节的快递
    【2018.10.3】万圣节的入场券
    【2018.10.2】纸条
    【2018.10.2】菌落合并
    【2018.10.2】Note of CXM
    【2018.10.1】【JSOI2016】最佳团体(bzoj4753)
    【2018.10.1】「JOI 2014 Final」年轮蛋糕
    【2018.9.26】K-D Tree详解
    Python中的numpy模块解析
    Python中xlrd模块解析
  • 原文地址:https://www.cnblogs.com/samwu/p/2453786.html
Copyright © 2011-2022 走看看