學習湯姆大叔的knockout教程筆記（二）

時間 2019-11-12

標籤學習湯姆 knockout 教程筆記简体版

原文原文鏈接

模板綁定The template binding

目的javascript

template綁定經過模板將數據render到頁面。模板綁定對於構建嵌套結構的頁面很是方便。默認狀況， Knockout用的是流行的jquery.tmpl模板引擎。使用它的話，須要在安裝頁面下載和引用jquery.tmpl和jQuery框架。或者你也能夠集成其它的模板引擎（雖然須要瞭解Knockout 內部知識才行）。html

<!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模板。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。