模板绑定The template binding
目的
template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况， Knockout用的是流行的jquery.tmpl模板引擎。使用它的话，需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎（虽然需要了解Knockout 内部知识才行）。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="libs/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="libs/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="libs/knockout-3.4.0.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div data-bind=‘template: "personTemplate"‘> </div>
<script id=‘personTemplate‘ type=‘text/html‘>
${ name } is ${ age } years old
<button data-bind=‘click: makeOlder‘>Make older</button>
</script>
<script type=‘text/javascript‘>
var viewModel = {
name: ko.observable(‘Bert‘),
age: ko.observable(78),
makeOlder: function () {
this.age(this.age() +1);
}
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
当引用的observable（dependent observable）数据改变的时候，Knockout会自动重新render模板。在这个例子里，每次点击button的时候都会重新render模板。
时间： 2024-10-11 18:02:41