knockout.js

knockout.js

0.双向绑定

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
   <!--step3: 绑定ViewModel到特定的View上-->
    My Name is  <div id="div1" data-bind="text:personName"></div>,
   My Age is <strong data-bind="text:personAge"></strong>
   <p/>

    Name:<input type="text" data-bind="value:personName"/>
    Age:<input type="text" data-bind="value:personAge"/>
   <button  onclick="changeName()">ChangeName</button>
   <button onclick="changeAge()">ChangeAge</button>
   <button onclick="test()">Test</button>
   <button onclick="getValue()">GetValue</button>
</body>

<script type="text/javascript">
    //step2 定义ViewModel
    //var myViewModel ={personName:"zhangsan",personAge:18};
    var myViewModel ={
        personName:ko.observable(""),
        personAge:ko.observable()
    }

    //step4: 激活KO
    ko.applyBindings(myViewModel);

    function changeName(){
        myViewModel.personName("zhangsan");//设置ViewModel的属性的值
    }

    function changeAge(){
        myViewModel.personAge(18);
    }

    function test(){
        myViewModel.personName("lishi").personAge(20);//设置ViewModel的属性的值
    }

    function getValue(){
        var personName = myViewModel.personName();//获取ViewModel的值
        var personAge=myViewModel.personAge();

        alert("personName:"+personName+",personAge:"+personAge);
    }
</script>
</html>

 

1.创建数据模型和监控属性

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

    <h1>姓名:<strong data-bind="text:personName"></strong></h1>
    <h2>年龄:<strong data-bind="text:personAge"></strong></h2>


    <input id="txtName" type="text" data-bind="value:personName">
    <input id="txAge" type="text" data-bind="value:personAge" />
    <br />

    <button onclick="cancelSubscribe()">取消订阅</button>
    
    <script>
        var subscription=null;
        var ViewModel1={
            personName:ko.observable("123"),//KO的双向绑定
            personAge:ko.observable()//
        };
        ko.applyBindings(ViewModel1);//激活KO
        //开启订阅
        subscription=ViewModel1.personAge.subscribe(function (newValue) {
            if(isNaN(newValue)){
                alert("请输入数字！");
                ViewModel1.personAge("");
            }
        });
        function cancelSubscribe() {
            if (subscription) {
                subscription.dispose();//取消订阅
            }
        }
    </script>
</body>
</html>

 

2.自动计算属性

2.1 Computed Observable

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
    firstName is <span data-bind="text:firstName"></span><br/>
    lastName is <span data-bind="text:lastName"></span><br />
    fullName is <span data-bind="text:fullName"></span><br/>
    <input type="text" data-bind="value:firstName" /><br/>
    <input type="text" data-bind="value:lastName" /><br />

    <script type="application/javascript">
        function viewModel() {
            var self =this;
            self.firstName = ko.observable("");
            self.lastName =ko.observable("");
            //this关键字 计算属性
            self.fullName = ko.computed(function () {
               return  self.firstName()+'.'+self.lastName();
            },self);
        }
        ko.applyBindings(viewModel);
    </script>
</body>
</html>

2.2 分解用户输入

<!DOCTYPE html>
<html lang="en">
<head>
    <title>分解用户输入</title>
    <meta charset="UTF-8">
    <script type="application/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>

    firstName is <span data-bind="text:firstName"></span><br/>
    lastName is <span data-bind="text:lastName"></span><br />
    fullName is <span data-bind="text:fullName"></span><br/>
    <input type="text" data-bind="value:firstName" /><br/>
    <input type="text" data-bind="value:lastName" /><br />
    <input type="text" data-bind="value:fullName" />

    <script type="application/javascript">
        function ViewModel() {
            var self =this;
            self.firstName = ko.observable("");
            self.lastName =ko.observable("");
            self.fullName=ko.computed({
                read: function () { //读取 显示
                    return this.firstName() + " " + this.lastName();        
                },
                write:function (value) { //输入的操作
                    var lastSpacePos = value.lastIndexOf(" ");
                    if(lastSpacePos>0){
                        this.firstName(value.substring(0, lastSpacePos));
                        this.lastName(value.substring(lastSpacePos + 1));
                    }
                },
                owner:self
            });

        }
        ko.applyBindings(ViewModel);

    </script>

</body>
</html>

2.3 值的转换（value 转换）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>value值转换</title>
    <meta charset="UTF-8">
    <script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

     数字是 <span data-bind="text:price "></span><br/>
     价格是 <input type="text" data-bind="value:formattedPrice" /><br/>

    <script>
        function viewModel() {
            var self=this;
            self.price = ko.observable(12.445);
            self.formattedPrice=ko.computed({
                read:function () {
                    return '$' + self.price().toFixed(2);//
                },
                write:function (value) {
                    value = parseFloat(value.replace(/[^\.\d]/g, ""));//
                    self.price(isNaN(value) ? 0 : value);//
                },
                owner:self
            });
        }
        ko.applyBindings(viewModel);
    </script>

</body>
</html>

2.4 筛选和验证用户输入

<!DOCTYPE html>
<html lang="en">
<head>
    <title>筛选和验证用户输入</title>
    <meta charset="UTF-8">
    <script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
    请输入新的价格：<input  id="txtNumber" type="text" data-bind="value:attemptedValue"/>
    <div data-bind="visible:!lastInputWasValid()">
        <font color="red">请输入数字！</font>
    </div>

    <script>
        function MyViewModel() {
            this.acceptedNumericValue = ko.observable(123);
            this.lastInputWasValid = ko.observable(true);//控制显示 true/false

            this.attemptedValue = ko.computed({//输入的值
                read: this.acceptedNumericValue,
                write: function (value) {
                    if (isNaN(value))
                        this.lastInputWasValid(false);
                    else {
                        this.lastInputWasValid(true);
                        this.acceptedNumericValue(value);
                    }
                },
                owner: this
            });
        }
        ko.applyBindings(new MyViewModel());
    </script>
</body>
</html>

3.监控数组  observableArray

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
Country:<select data-bind="options:availableCountries"></select>
<button onclick="add()">添加</button>
<button onclick="del() ">删除</button>
<button onclick="edit()">修改</button>
<button onclick="index()">IndexOf</button>
<button onclick="slice()">slice</button>
<button onclick="unshift()">unshift</button>

</body>
<script type="text/javascript">

    //myObservableArray.push('Some new value')：增加一个新的元素
    // myObservableArray.pop()：删除一个元素，并返回其值
    // myObservableArray.unshift('Some new value')：在数组的开始处增加一个新的元素
    // myObservableArray.shift()：删除数组的第一个元素，并返回其值
    // myObservableArray.reverse()：反转数组的顺序
    // myObservableArray.sort()：数组排序。

    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
    };
   ko.applyBindings(viewModel);

   function add(){
       //viewModel.availableCountries().push("England");
       viewModel.availableCountries.push("England");
   }
   function del(){
      // viewModel.availableCountries.shift();
      // viewModel.availableCountries.pop();
       //viewModel.availableCountries.remove("Germany");
       //viewModel.availableCountries.removeAll(["France","Spain"]);

      /*var result = viewModel.availableCountries.remove(function(item){
            return item.length>5;
       });
       console.log(result);*/

     var result =  viewModel.availableCountries.splice(1,2);//删除 ，从索引1开始删除2个元素！
       console.log(result);
   }
   function edit(){
     //viewModel.availableCountries[0]="aaaa";
       viewModel.availableCountries.replace("Germany","china");
   }
   function index(){
       var index = viewModel.availableCountries.indexOf("Germany");
       alert(index);
       var item = viewModel.availableCountries()[index];
       alert(item);
   }

   function slice(){
       var result = viewModel.availableCountries.slice(1,3);
       console.log(result);
   }
   function unshift(){
       viewModel.availableCountries.unshift("--selected--");//
   }
</script>
</html>

4.使用内置绑定

4.1 控制文本和外观

visible

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
   <div data-bind="visible:isShow">
       Hello,Knockout.js
   </div>
   <button onclick="show()">show</button>
   <button onclick="hide()">hide</button>
</body>
<script type="text/javascript">
    function MyViewMode(){
        this.isShow=ko.observable(true);
    }
    var myViewModel = new MyViewMode()

    ko.applyBindings(myViewModel);

    function show(){
        myViewModel.isShow(true);
    }
    function hide(){
        myViewModel.isShow(false);
    }
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
   <div data-bind="visible:myValues().length>0">
       Hello,Knockout.js
   </div>
   <button onclick="add()">Add</button>
   <button onclick="del()">Remove</button>
</body>
<script type="text/javascript">
    var myViewModel={
        myValues: ko.observableArray([])
    };
    ko.applyBindings(myViewModel);
    function add(){
        myViewModel.myValues.push("aaa");
    }
    function del(){
        myViewModel.myValues.shift();
    }
</script>
</html>

text

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
   <div data-bind="text:message"></div>
   <input type="text" data-bind="value:message"/>
   <button onclick="msg()">添加一段话</button>
</body>
<script type="text/javascript">
    var myViewModel={
        message:ko.observable("")
    };
    ko.applyBindings(myViewModel);
    function msg(){
        myViewModel.message("hello,knockout.js");
    }
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
   <div data-bind="text:priceRating"></div>
   <div data-bind="text:price()>50?'high':'lower'"></div>
   <input type="text" data-bind="value:price" />
</body>
<script type="text/javascript">
    var myViewModel={
       price:ko.observable(30)
    };
    myViewModel.priceRating = ko.computed(
            function(){
               return this.price()>50?"high":"lower";
            },
            myViewModel
    );
    ko.applyBindings(myViewModel);
</script>
</html>

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
   <div data-bind="html:detail"></div>
   <div data-bind="text:detail"></div>
</body>
<script type="text/javascript">
    var myViewModel={
       detail:ko.observable()
    };
    ko.applyBindings(myViewModel);
    myViewModel.detail("<script type='text/javascript'>alert('ok')"+"</"+"script><em>"+"For further details, " +
            "view the report<a href='report.html'>here</a>.</em>");
</script>
</html>

css 控制class样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

    <style type="text/css">
        .profitWarning {
            color: red;
        }
        .font-w{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div data-bind='text:detail,css:{profitWarning:currentProfit()<0,"font-w":currentProfit()>0}'></div>
<input type="text" data-bind="value:currentProfit" />
<!--<div class="profitWarning">Hello,Knockout.js</div>-->
</body>
<script type="text/javascript">
    var myViewModel={
       detail:ko.observable(),
       currentProfit: ko.observable(15000)
    };
    ko.applyBindings(myViewModel);
    myViewModel.detail("Hello , Knockout.js");
    myViewModel.currentProfit(-1);
</script>
</html>

style 样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
<input type="text" data-bind="value:price,style:{color:price()>0?'red':'black'}"/>
<!--<span data-bind="style:{color:price()>0?'red':'black','font-Weight':price()>0?'bold':'normal'}">测试</span>-->
<span data-bind="style:{color:price()>0?'red':'black',fontWeight:price()>0?'bold':'normal'}">测试</span>
</body>
<script type="text/javascript">
    var myViewMode = {
        price:ko.observable(100)
    }
    ko.applyBindings(myViewMode);
</script>
</html>

 attr

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<a data-bind="text:content,attr:{href:url,title:title,target:desc}"></a>
</body>
<script type="text/javascript">
    var myViewMode = {
        url:ko.observable("http://www.baidu.com"),
        title:ko.observable("点击打开百度"),
        desc:"_blank",
        content:"百度"
    }
    ko.applyBindings(myViewMode);
</script>
</html>

 4.2 绑定逻辑控制

foreach

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<table border="1">
    <thead><tr><th>First Name</th><th>Last Name</th></tr></thead>
    <tbody data-bind="foreach:people">
    <tr>
        <td data-bind="text:firstName"></td>
        <td  data-bind="text:lastName"></td>
    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    ko.applyBindings({
        people:[
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    });
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<h4>People</h4>
<ul  data-bind="foreach:people">
    <li>
        Name:<span data-bind="text:name"></span>
        <a href="#" data-bind="click:$parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click:addPerson">Add</button>
</body>
<script type="text/javascript">
    function AppViewModel(){
        var self = this;
        self.people=ko.observableArray([
            {name:"zhang"},
            {name:"wang"},
            {name:"li"}
        ]);
        self.addPerson=function(){
            self.people.push({name:"New at is "+new Date()});
        };
        self.removePerson = function(){
            self.people.remove(this);
        }
    }
    ko.applyBindings(new AppViewModel());
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
<h4>People</h4>

<ul  data-bind="foreach:people">
    <li>
        Name:<span data-bind="text:$data.name"></span><!-- $data foreach中遍历的元素 -->
        <a href="#" data-bind="click:$parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click:addPerson">Add</button>
<ul data-bind="foreach:month">
    <li data-bind="text:$data"></li>
</ul>
</body>
<script type="text/javascript">
    function AppViewModel(){
        var self = this;
        self.people=ko.observableArray([
            {name:"zhang"},
            {name:"wang"},
            {name:"li"}
        ]);
        self.month=ko.observableArray([ 'Jan', 'Feb', 'Mar', 'etc' ]);
        self.addPerson=function(){
            self.people.push({name:"New at is "+new Date()});
        };
        self.removePerson = function(){
            self.people.remove(this);
        }
    }
    ko.applyBindings(new AppViewModel());
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
   <h1 data-bind="text:title"></h1>
   <ul data-bind="foreach:articles">
       <li data-bind="text:name"></li> from <strong data-bind="text:$parent.title"></strong>
   </ul>
</body>
<script type="text/javascript">
    function Article(){
        this.title= ko.observable("Knockout.js从入门到精通");
        this.articles = ko.observableArray([{name:"文章一"},{name:"文章二"},{name:"文章三"}]);
    }
    ko.applyBindings(new Article());
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
  <!--<ul data-bind="foreach:categories">
      <li>
          <ul data-bind="foreach:items">
              <li>
                  <span data-bind="text:$parent.name"></span>
                  <span data-bind="text:$data"></span>
              </li>
          </ul>
      </li>
  </ul>-->
  <ul data-bind="foreach:{data:categories,as:'c'}">
      <li>
          <ul data-bind="foreach:{data:items,as:'item'}">
              <li>
                  <span data-bind="text:c.name"></span>
                  <span data-bind="text:item"></span>
              </li>
          </ul>
      </li>
  </ul>
</body>
<script type="text/javascript">
    var viewModel ={
        categories:ko.observableArray([
            {name:"A",items:["A1","A2","A3"]},
            {name:"B",items:["B1","B2","B3"]}
        ])
    };
    ko.applyBindings(viewModel);
</script>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
 <ul>
     <li>商品类别如下：</li>
     <!-- ko foreach: items -->
     <li>
       <span data-bind="text:$index"></span>  item <span data-bind="text:$data"></span>
     </li>
     <!-- /ko -->
 </ul>
</body>
<script type="text/javascript">
    var viewModel ={
        items:ko.observableArray(["A","B","C"])
    };
    ko.applyBindings(viewModel);
</script>
</html>

 if / Ifnot

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<lable><input type="checkbox" data-bind="checked:displayMessage"/>Display Message</lable>
<div data-bind="if:displayMessage">Here is A Message</div>
<div data-bind="visible:displayMessage">Hello,Knockout.js</div>
</body>
<script type="text/javascript">
   ko.applyBindings({
       displayMessage:ko.observable(false)
   })
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<ul data-bind="foreach:mydata">
    <li>
        name:<b data-bind="text:name"></b>
        <div data-bind="if:code">
            code:<b data-bind="text:code.child"></b>
        </div>
    </li>
</ul>
</body>
<script type="text/javascript">
  var viewModel ={
      mydata:[
          {
              name:"name01",code:null
          },{
              name:"name02",code:{child:"mychild"}
          }
      ]
  }
  ko.applyBindings(viewModel);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<lable><input type="checkbox" data-bind="checked:displayMessage"/>Display Message</lable>
<div data-bind="ifnot:!displayMessage()">Here is A Message</div>
</body>
<script type="text/javascript">
    ko.applyBindings({
        displayMessage:ko.observable(true)
    })
</script>
</html>

with

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>

</head>
<body>
<h1 data-bind="text:city"></h1>
<!--<p>
    latitude:<span data-bind="text:coords.latitude"></span> <br/>
    longitude:<span data-bind="text:coords.longitude"></span>
</p>-->
<!--<p data-bind="with: coords">-->
<p data-bind="with: coords">
    latitude:<span data-bind="text: latitude"></span> <br/>
    longitude:<span data-bind="text: longitude"></span>
</p>

</body>
<script type="text/javascript">
   var viewModel ={
       city: "London",
       coords: {
           latitude: 51.5001524,
           longitude: -0.1262362
       }
   };
   ko.applyBindings(viewModel);
</script>
</html>

 

 

5.模板绑定

5.1 jquery tmpl 模板

摘自：https://www.cnblogs.com/zhuzhiyuan/p/3510175.html

{{=}},{{tmpl}} and {{wrap}}.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>
    <script type="text/javascript">
        $(function(){
           //第一种应用方式
            /*var markup = "<li><b>${Name}</b>(${ReleaseYear})</li>";
            $.template("movieTemplate",markup);
            var movies=[
                {Name:"A电影",ReleaseYear:"1988"},
                {Name:"B电影",ReleaseYear:"1998"},
                {Name:"C电影",ReleaseYear:"2008"}
            ]
           $.tmpl("movieTemplate",movies).appendTo("#movieList");*/

            //第二种应用方式
            /*var markup = "<li><b>${Name}</b>(${ReleaseYear})</li>";
             var movies=[
             {Name:"A电影",ReleaseYear:"1988"},
             {Name:"B电影",ReleaseYear:"1998"},
             {Name:"C电影",ReleaseYear:"2008"}
             ]
             $.tmpl(markup,movies).appendTo("#movieList");*/

            //第三种应用方式（推荐）
            var movies=[
                {Name:"A电影",ReleaseYear:"1988"},
                {Name:"B电影",ReleaseYear:"1998"},
                {Name:"C电影",ReleaseYear:"2008"}
            ];
            $("#movieTemplate").tmpl(movies).appendTo("#movieList");

        })
    </script>
</head>
<body>
    <ul id="movieList"></ul>
    <script id="movieTemplate" type="text/x-jquery-tmpl">
       <li><b>${Name}</b>(${ReleaseYear})</li>
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>

</head>
<body>
<div id="div1_demo">

</div>

<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{= Name}}</span>
    　　<span style="margin-left:10px;">${Number(Num)+1}</span>
    　　<span style="margin-left:10px;">${Status}</span>
    </div>
</script>
<script  type="text/javascript">
      var users = [
      { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
      { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}
      ];
      $("#demo").tmpl(users).appendTo("#div1_demo");
</script>
</body>
</html>

 {{each}} 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>
<h3>users</h3>
<div id="div1_demo"></div>
<!--<script id="demo" type="text/x-jquery-tmpl">
 <ul>
 {{each users}}
        <li>Id:{{= $value.id}},Name:${$value.name}</li>
  {{/each}}
  </ul>
</script>-->
<script id="demo" type="text/x-jquery-tmpl">
 <ul>
 {{each(index,item) users}}
        <li>No:${index},Id:{{= item.id}},Name:${item.name}</li>
  {{/each}}
  </ul>
</script>
<script  type="text/javascript">
      /*var users = [
      { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
      { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}
      ];*/
      var data ={
          users:[{id:1,name:"user01"},{id:2,name:"user02"},{id:3,name:"user03"}]
      };
      $("#demo").tmpl(data).appendTo("#div1_demo");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>
<div id="div_each"></div>
<script id="each" type="text/x-jquery-tmpl">
     <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
        {{if i==0}}
            <h4>group</h4>
            {{each(j,group) groups}}
                <div>${group.name}</div>
            {{/each}}
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script>
<script  type="text/javascript">
      /*var users = [
      { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
      { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}
      ];*/
      var eachData = {
          users: [{ name: 'jerry' }, { name: 'john'}],
          groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}],
          departs: [{ name: 'IT'}]
      };
      $("#each").tmpl(eachData).appendTo("#div_each");
</script>
</body>
</html>

{{if }} {{else}}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>

</head>
<body>

<div id="div_ifelse">

</div>

<script id="ifelse" type="text/x-jquery-tmpl">
    <div style="margin-bottom:10px;">
    　　<p>ID:${ID}</p>
        <p>Name:{{= Name}}</p>
        <p>Other:
           {{if Status}}
              <span>${Status}</span>
           {{else App}}
              <span>${App}</span>
           {{else}}
              <span>None</span>
           {{/if}}
        </p>
    </div>
</script>

<script id="ifelseTo" type="text/x-jquery=tmpl">

        <ul>
            {{each(index,item) users}}
                <li>
                    index:${index},ID:${item.ID},Name:${item.Name}
                </li>
            {{/each}}
        </ul>

</script>

<script  type="text/javascript">
    var users = [
        { ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 },
        { ID: 'aCloud', Name: 'Mary Cheung', App: 1 },
        { ID: 'bMingdao', Name: 'Jerry Jin'}
    ];
    var data ={
        users:[{id:1,name:"user01"},{id:2,name:"user02"},{id:3,name:"user03"}]
    };

      //$("#ifelse").tmpl(users).appendTo("#div_ifelse");
      //  $("#demo").tmpl(data).appendTo("#div1_demo");
    $("#ifelseTo").tmpl(data).appendTo("#div_ifelse");
</script>
</body>
</html>

 {{html}} 输出变量html,但是没有html编码，适合输出html代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<div id="div_html">

</div>

<script id="html" type="text/x-jquery-tmpl">
<div>Id:${Id}</div>
<div>Name:{{= Name}}</div>
<div>Html:
     ${html},
     {{html html}}
</div>
</script>

<script  type="text/javascript">
    var data = {Id:1,Name:"zhang",html:"<button>Test</button>"};
      $("#html").tmpl(data).appendTo("#div_html");
</script>

</body>
</html>

{{tmpl}} 嵌套模版

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>
<div id="div_tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
<h2>${ID}</h2>
<p>Name:</p>
{{tmpl($data) '#tmpl2'}}
</script>
<script id="tmpl2" type="text/x-jquery-tmpl">
<ul>
    {{each Name}}
        <li>
        ${$value}
        </li>
    {{/each}}
</ul>
</script>
<script  type="text/javascript">
    var users = [
        { ID: 'think8848', Name: ['Joseph', 'Chan'] },
        { ID: 'aCloud', Name: ['Mary', 'Cheung']}
    ];
    $("#tmpl1").tmpl(users).appendTo("#div_tmpl");
</script>
</body>
</html>

{{wrap}},包装器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>

</head>
<body>
<div id="div_wrap">

</div>

<script id="tmpl1" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}
</script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
 <table cellspacing="0" cellpadding="3" border="1"><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
</script>
<script  type="text/javascript">
    $('#tmpl1').tmpl().appendTo('#div_wrap');
</script>
</body>
</html>

$data $item $item代表当前的模板；$data代表当前的数据

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>

</head>
<body>
<div id="mydiv">

</div>

<script id="mytmpl" type="text/x-jquery-tmpl">
   <div>
      <span>${$data.ID}</span>
      <span style="margin-left:10px">${$item.getName(" ")}</span>
   </div>
</script>

<script  type="text/javascript">
    var users = [
        { ID: 'think8848', Name: ['Joseph', 'Chan'] },
        { ID: 'aCloud', Name: ['Mary', 'Cheung']}
    ];

    $("#mytmpl").tmpl(users,{
        getName:function(spr){
            return this.data.Name.join(spr);
        }
    }).appendTo("#mydiv");

</script>
</body>
</html>

 $.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="js/jquery-tmpl/jquery.tmpl.js"></script>

</head>
<body>
<div id="mydiv">

</div>

<script id="mytmpl" type="text/x-jquery-tmpl">
   <div>
      <span>${$data.ID}</span>
      <span style="margin-left:10px">${$item.getName(" ")}</span>
   </div>
</script>

<script  type="text/javascript">
    var users = [
        { ID: 'think8848', Name: ['Joseph', 'Chan'] },
        { ID: 'aCloud', Name: ['Mary', 'Cheung']}
    ];

    $("#mytmpl").tmpl(users,{
        getName:function(spr){
            return this.data.Name.join(spr);
        }
    }).appendTo("#mydiv");
    $('#mydiv').delegate('div', 'click', function () {
        var item = $.tmplItem(this);
        alert(item.data.Name);
    });
</script>
</body>
</html>

 

5.2 KO模板绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

<div data-bind="template:{name:'person-template',data:buyer}"></div>
<div data-bind="template:{name:'person-template',data:seller}"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text:name"></h3>
    <p>credits:<span data-bind="text:credits"></span></p>
</script>
<script type="text/javascript">
    function MyViewModel() {
        this.buyer = { name: 'Franklin', credits: 250 };
        this.seller = { name: 'Mario', credits: 5800 };
    }
    ko.applyBindings(new MyViewModel());
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<!--<div data-bind="template:{name:'person-template',data:buyer}"></div>
<div data-bind="template:{name:'person-template',data:seller}"></div>-->
<div data-bind="template:{name:'person-template',foreach:person}"></div>
<script type="text/html" id="person-template">
    <h3 data-bind="text:name"></h3>
    <p>credits:<span data-bind="text:credits"></span></p>
</script>
<script type="text/javascript">
    function MyViewModel() {
        this.person=[
            { name: 'Franklin', credits: 250 },
            { name: 'Mario', credits: 5800 }
        ]
    }
    ko.applyBindings(new MyViewModel());
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

<ul data-bind="template:{name:'seasonTemplate',foreach:seasons , as:'season'}"></ul>

<script type="text/html" id="seasonTemplate">
<li>
    <strong data-bind="text:name"></strong>
    <ul data-bind="template:{name:'monthTemplate',foreach:months,as:'month'}"></ul>
</li>
</script>

<script type="text/html" id="monthTemplate">
  <li data-bind="text:month"></li>
    is in
   <span data-bind="text:season.name"></span>
</script>

<script type="text/javascript">
    var viewModel = {
            seasons: ko.observableArray([
            { name: 'Spring', months: [ 'March', 'April', 'May' ] },
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
            ])};
    ko.applyBindings(viewModel);
</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

<ul data-bind="template:{name:displayMode,foreach:employees}"></ul>
<button onclick="test()">test</button>

<script type="text/html" id="active">
    <h3>A模板</h3>
</script>

<script type="text/html" id="inactive">
    <h3>B模板</h3>
</script>

<script type="text/javascript">
    function test(){
        viewModel.employees()[1].active(true);
    }
    var viewModel = {
             employees: ko.observableArray([
            { name: "Kari", active: ko.observable(true) },
            { name: "Brynn", active: ko.observable(false) },
            { name: "Nora", active: ko.observable(false) }
            ]),
            displayMode: function(employee) {
            // Initially "Kari" uses the "active" template, while the others use "inactive"
             return employee.active() ? "active" : "inactive";
            }};
    ko.applyBindings(viewModel);
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-tmpl-master/jquery.tmpl.js"></script>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<!--<div data-bind="template:{name:'personTemplate'}"></div>-->
<div data-bind="template:'personTemplate'"></div>

<script type="text/html" id="personTemplate">
    ${name} is ${age} yeas old
    <button data-bind="click:makeOlder">Make Older</button>
</script>

<script type="text/javascript">
    var viewModel ={
        name:ko.observable("zhangsan"),
        age:ko.observable(18),
        makeOlder:function(){
            this.age(this.age()+1);
        }
    };
    ko.applyBindings(viewModel);
</script>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-tmpl-master/jquery.tmpl.js"></script>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<h1>people</h1>

<div data-bind="template:'peopleList'"></div>

<script type="text/html" id="peopleList">
    {{each people}}
        <p>
            <b>${name}</b> is ${age} years old
        </p>
    {{/each}}
</script>

<script type="text/javascript">
    var viewModel= {
        people:ko.observableArray([
            {name:"zhang",age:12},
            {name:"li",age:13},
            {name:"wang",age:14}
            ]
        )
    };

    //ko.applyBindings(new viewModel());
    ko.applyBindings(viewModel);
</script>

</body>
</html>

 

6.KO高级篇

6.1 KO自定义绑定

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定（像click，value等）。你可以你封装复杂的逻辑或行为，自定义很容易使用和重用的绑定。例如，你可以在form表单里自定义像grid，tabset等这样的绑定。

 

注册你的绑定

添加子属性到ko.bindingHandlers来注册你的绑定：

ko.bindingHandlers.yourBindingName = {    
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {        
        //此处当你定义的绑定被第一次应用于一个元素上时会被调用        
        //在这设置任意初始化程序、事件处理程序   
     },    
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {        
        // This will be called once when the binding is first applied to an element,        
        // and again whenever the associated observable changes value.        
        // Update the DOM element based on the supplied values here.    
    }
};

然后就可以在任何DOM元素上使用了：

<div data-bind="yourBindingName: someValue"> </div>

注：你实际上没必要把init和update这两个callbacks都定义，你可以只定义其中的任意一个。

 

update 回调

当管理的observable改变的时候，KO会调用你的update callback函数，然后传递以下参数：

** element — 使用这个绑定的DOM元素 

** valueAccessor —JavaScript函数，通过valueAccessor()可以得到应用到这个绑定的model上的当前属性值。 

** allBindingsAccessor —JavaScript函数，通过allBindingsAccessor ()得到这个元素上所有model的属性值。 

** viewModel — 传递给ko.applyBindings使用的 view model参数，如果是模板内部的话，那这个参数就是传递给该模板的数据。

 

例如，你可能想通过 visible绑定来控制一个元素的可见性，但是你想让该元素在隐藏或者显示的时候加入动画效果。那你可以自定义自己的绑定来调用jQuery的slideUp/slideDown 函数：

ko.bindingHandlers.slideVisible = {    
    update: function(element, valueAccessor, allBindingsAccessor) {        
        // First get the latest data that we're bound to        
        var value = valueAccessor(), allBindings = allBindingsAccessor();                
        // Next, whether or not the supplied model property is observable, get its current value        
        var valueUnwrapped = ko.utils.unwrapObservable(value);        
        // Grab some more data from another binding property        
        var duration = allBindings.slideDuration || 400;        
        // 400ms is default duration unless otherwise specified             
        // Now manipulate the DOM element                        
        if (valueUnwrapped == true)            
            $(element).slideDown(duration); // Make the element visible        
        else            
            $(element).slideUp(duration);   // Make the element invisible    
        }
};

然后你可以像这样使用你的绑定：

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap"/> Gift wrap</label> 

<script type="text/javascript">    
    var viewModel = {        
        giftWrap: ko.observable(true)    
    };    
    ko.applyBindings(viewModel);
</script>

当然，看来可能代码很多，但是一旦你创建了自定义绑定，你就可以在很多地方重用它。

 

init 回调

Knockout在DOM元素使用自定义绑定的时候会调用你的init函数。init有两个重要的用途：

** 为DOM元素设置初始值 

** 注册事件句柄，例如当用户点击或者编辑DOM元素的时候，你可以改变相关的observable值的状态。

KO会传递和update回调函数一样的参数。

 

继续上面的例子，你可以像让slideVisible在页面第一次显示的时候设置该元素的状态（但是不使用任何动画效果），而只是让动画在以后改变的时候再执行。你可以这样来做：

ko.bindingHandlers.slideVisible = {    
    init: function(element, valueAccessor) {        
        var value = ko.utils.unwrapObservable(valueAccessor());        
        // Get the current value of the current property we're bound to        
        $(element).toggle(value);        
        // jQuery will hide/show the element depending on whether "value" or true or false    
    },    
    update: function(element, valueAccessor, allBindingsAccessor) {        
        // Leave as before    
    }
};

 

DOM事件之后更新observable值

你已经值得了如何使用update回调，当observable值改变的时候，你可以更新相关的DOM元素。但是其它形式的事件怎么做呢？比如当用户对某个DOM元素有某些action操作的时候，你想更新相关的observable值。

你可以使用init回调来注册一个事件句柄，这样可以改变相关的observable值，例如，

ko.bindingHandlers.hasFocus = {    
        init: function (element, valueAccessor) {        
            $(element).focus(function () {            
                var value = valueAccessor();            
                value(true);        
                }
            );        
            $(element).blur(function () {            
                var value = valueAccessor();            
                value(false);        
                });    
            },    
        update: function (element, valueAccessor) {        
            var value = valueAccessor();        
            if (ko.utils.unwrapObservable(value))            
                element.focus();        
            else            
                element.blur();    
            }
    };

现在你可以通过hasFocus绑定来读取或者写入这个observable值了：

<p>Name: <input data-bind="hasFocus: editingName"/></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>

<script type="text/javascript">    
    var viewModel = {        
        editingName: ko.observable()    
    };    
    ko.applyBindings(viewModel);
</script>

 

Demo 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<div data-bind="slideVisible:giftWrap,slideDuration:600">这是一个用于测试动画效果的DIV元素</div>
<label><input type="checkbox" data-bind="checked:giftWrap">隐藏/显示 </label>
<script type="text/javascript">
    ko.bindingHandlers.slideVisible={
        update: function(element, valueAccessor, allBindingsAccessor) {
            //第一步得到绑定元素上面的当前值
             var value=valueAccessor();
             var isVisible = ko.utils.unwrapObservable(value);
            //第二步得到所有data-bind所对应的属性
            var allBindings = allBindingsAccessor();
            var duration = allBindings.slideDuration || 400;
            console.log(isVisible);
            console.log(duration);
            //第三步根据当前绑定的值来做业务逻辑，当前值为true,就让当前的元素动画隐藏，否则的话，动画显示
            if (isVisible){
                $(element).slideDown(duration);
            }else{
                $(element).slideUp(duration);
            }
        }
    };
    var viewModel={
        giftWrap: ko.observable(true)
    };
    ko.applyBindings(viewModel);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<div data-bind="slideVisible:giftWrap,slideDuration:600">这是一个用于测试动画效果的DIV元素</div>
<label><input type="checkbox" data-bind="checked:giftWrap">隐藏/显示 </label>
<script type="text/javascript">
    ko.bindingHandlers.slideVisible={
        init:function(element, valueAccessor, allBindingsAccessor) {
            console.log("init");
            var value = ko.utils.unwrapObservable(valueAccessor());
            console.log("init value="+value);
            $(element).toggle(value);
        },
        update: function(element, valueAccessor, allBindingsAccessor) {
            //第一步得到绑定元素上面的当前值
             var value=valueAccessor();
             var isVisible = ko.utils.unwrapObservable(value);
            //第二步得到所有data-bind所对应的属性
            var allBindings = allBindingsAccessor();
            var duration = allBindings.slideDuration || 400;
            console.log(isVisible);
            console.log(duration);
            //第三步根据当前绑定的值来做业务逻辑，当前值为true,就让当前的元素动画隐藏，否则的话，动画显示
            if (isVisible){
                $(element).slideDown(duration);
            }else{
                $(element).slideUp(duration);
            }

        }
    };
    var viewModel={
        giftWrap: ko.observable(true)
    };
    ko.applyBindings(viewModel);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!--step1:添加KO的引用-->
    <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>

<p>Name: <input data-bind="hasFocus: editingName"/></p>
<p>Age:<input data-bind="hasFocus:editingName" /></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>
<script type="text/javascript">

    ko.bindingHandlers.hasFocus={
        init:function(element, valueAccessor, allBindingsAccessor) {
              $(element).focus(function(){
                  var value=valueAccessor();
                  value(true);//viewModel.editingName(true)
              });
              $(element).blur(function(){
                  var value = valueAccessor();
                  value(false);//viewModel.editingName(false)
              })

        },
        update: function(element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value){
                element.focus();
            }else{
                element.blur();
            }
        }
    };

    var viewModel={
        editingName: ko.observable()
    };
    ko.applyBindings(viewModel);
</script>
</body>
</html>

 

6.2 控制子绑定

 

posted @ 2020-06-05 23:47  youguess  阅读(217)  评论(0)  编辑  收藏  举报