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>
<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>
<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>
<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就不说了。
合乎自然而生生不息。。。
