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就不说了。