Knockout>The "template" binding

Knockout的模板绑定，

模版可以用来方便构建复杂的HTML界面，比如拥有嵌套结构的HTML代码页面。

Knockout有两种方式使用模板：

1.Knockout自带的模板引擎。

2.第三方的模版引擎，比如jQuery.tmpl

Knockout自带模版引擎的参数列表：

data-bind= "template: { name: 'person-template', data/foreach: buyer,afterRender/afterAdd/beforeRemove}"

name参数就是所对应你定义的模板id，

data参数就是你的模板数据源，指向一个js对象；foreach参数也是，指向一个js对象数组。

 

afterRender/afterAdd/beforeRemove这三个，就是事件咯，触发时机看名字，它们回调函数。

 

 

第一个例子， 没什么好说

<! DOCTYPE html >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >The "template" binding </ title >
< script  type ="text/javascript"  src ="../jquery-1.7.1.js" ></ script >
< script  type ="text/javascript"  src ="../knockout-2.0.0.debug.js" ></ script >
< script  type ="text/javascript" >
$( function (){

     function  MyViewModel() {
         this .buyer  =  { name:  ' Franklin ' , credits:  250  };
         this .seller  =  { name:  ' Mario ' , credits:  5800  };    
    }
    ko.applyBindings( new  MyViewModel());     

})

</ script >
</ head >
< body >
< h2 >Participants </ h2 >
Here are the participants:
< 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 >
</ body >
</ html >

 

 

第二个例子：解释就是，第一个例子用了data参数，第二个例子用了foreach参数

<! DOCTYPE html >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >The "template" binding </ title >
< script  type ="text/javascript"  src ="../jquery-1.7.1.js" ></ script >
< script  type ="text/javascript"  src ="../knockout-2.0.0.debug.js" ></ script >
< script  type ="text/javascript" >
$( function (){
     function  MyViewModel() {
         this .people  =  [
            { name:  ' Franklin ' , credits:  250  },
            { name:  ' Mario ' , credits:  5800  }
        ]
    }
    ko.applyBindings( new  MyViewModel());

})

</ script >
</ head >
< body >
< h2 >Participants </ h2 >
Here are the participants:
< div  data-bind ="template: { name: 'person-template', foreach: people }" ></ div > 
< script  type ="text/html"  id ="person-template" >
     < h3 data - bind = " text: name " >< / h3>
     < p > Credits:  < span data - bind = " text: credits " >< / span>< / p >
</ script >
</ body >
</ html >

 

第三个例子：动态选择模板，往name里面传入一个方法，用来筛选用哪个模板

<! DOCTYPE html >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >The "template" binding </ title >
< script  type ="text/javascript"  src ="../jquery-1.7.1.js" ></ script >
< script  type ="text/javascript"  src ="../knockout-2.0.0.debug.js" ></ script >
< script  type ="text/javascript" >
$( function (){
     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) {
             return  employee.active()  ?   " active "  :  " inactive " ;
        }
    };
     // viewModel.employees()[1].active(true);
    ko.applyBindings(viewModel);

})

</ script >
</ head >
< body >
< h2 >Participants </ h2 >
Here are the participants:
< div  data-bind ="template: { name: displayMode, foreach: employees }" ></ div > 
< script  type ="text/html"  id ="active" >
    active: < span data - bind = " text: name " >< / span>
</ script >
< script  type ="text/html"  id ="inactive" >
    inactive: < span data - bind = " text: name " >< / span>
</ script >
</ body >
</ html >

 

至于如何用第三方模板引擎，比如jQuery.tmpl就不说了。