Knockout學習之模板綁定器

模板綁定器

      如今頁面結構越來越復雜，僅僅依靠foreach已經不足以我們的使用，這個時候我們就需要模板的存在，模板的優點自然很多，首先會讓頁面整潔，同時修改起來也可以方面的定位，最重要的是ko可以條件式選擇模板來呈現數據。下面我們將開始逐一的學習。

 

1.呈現一個簡單的模板

常規的js我們需要寫上去，如下所示：

 <script type="text/javascript">
        $(function () {
            var viewMode = {
                datas: ko.observableArray({name:"123",value:123})
            };
            ko.applyBindings(viewMode);
        });
</script>

 

然后我們在指定我們的模板：

<script type="text/html" id="data-template" >
    <div data-bind="text:name" ></div>
    <div data-bind="text:value" ></div>
</script>

 

最后我們在頁面中使用這個模板：

<div data-bind="template: {name:'data-template',data:datas}" ></div>

 

      其中template就是我們今天的主角，name用來指定使用的模板名字，data是指定用來呈現的數據，然后我們在瀏覽器中查看。

 

2.利用”foreach”選項呈現模板

      上面的方法只能用來呈現一條數據的，但是大多數實際應用中我們都需要按照一個模板循環呈現數據，那么我們就需要使用foreach選項。

 

首先我們先修改js，改成數組：

<script type="text/javascript">
        $(function () {
            var viewMode = {
                datas: ko.observableArray([{ name: "123", value: 123 }, { name: "456", value: 456 }])
            };
            ko.applyBindings(viewMode);
        });
</script>

然后將上面的data改成foreach就可以，刷新頁面，我們就可以看到結果了。

 

3.利用”as”重命名

      這個選項在一般情況下我們不會使用，除非我們需要在模板中使用子模板的時候，這個as選項就非常有用，通過下面的例子我們看出具體的用法在哪：

<div data-bind="template: {name:'data-template',foreach:datas,as:'t'}" ></div>

<script type="text/html" id="data-template" >
    <div data-bind="text: name" ></div>
    <div data-bind="template: {name:'value-template',foreach:value}" ></div>
</script>

<script type="text/html" id="value-template">
    <div data-bind="text:t.name" ></div>
    <div data-bind="text:$data" ></div>
</script>

    <script type="text/javascript">
        $(function () {
            var viewMode = {
                datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }])
            };

            ko.applyBindings(viewMode);
        });
    </script>

      我們定義了兩個模板，分別為”data-template”和”value-template”，而”data-template”中又使用了”value-template”模板，”value-template”模板中使用t.name來訪問上級的name其中t就是as的作用。

 

4.使用”afterRender”,”afterAdd”和”beforeRemove”事件

      這幾個事件就是用來在呈現模板的過程中響應不同的事件，並且還會傳遞對應的參數。下面我們改變上面的示例，響應afterRender事件，並輸出對應的name，首先我們在data-bind中添加afterRender：

<div data-bind="template: { name: 'data-template', foreach: datas, as: 't', afterRender: onRender }" ></div>

 

 

然后在js中添加一個函數：

    <script type="text/javascript">
        $(function () {
            var viewMode = {
                datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }]),
                onRender:function(ele,arg){
                    console.log(arg.name);
                }
            };

            ko.applyBindings(viewMode);
        });
    </script>

 

 

5.動態選擇模板

      我們一開始也說了使用模板的另一個最大的好處就是可以動態的選擇呈現的模板，這樣對於某些外觀差距很大，但是都屬於同一個數據的情況下可以利用這個來實現，其實實現起來也很簡單，我們只要在指定name的時候指定一個函數就可以，在呈現每個數據的時候會回調這個函數，並把當前的數據作為參數傳遞進來，然后我們就可以根據數據的具體情況來返回對應的模板名稱了，比如下面的示例代碼：

<div data-bind="template: { name: templateName, foreach: datas}" ></div>

<script type="text/html" id="data-template" >
    <div>A</div>
    <div data-bind="text: name" ></div>
</script>

<script type="text/html" id="value-template">
    <div>B</div>
    <div data-bind="text:name" ></div>
</script>

    <script type="text/javascript">
        $(function () {
            var viewMode = {
                datas: ko.observableArray([{ name: "123", value: [1, 2, 3, ] }, { name: "456", value: [4, 5, 6] }]),
                templateName: function (ele) {
                    if (ele.name == "123") {
                        return "data-template";
                    } else {
                        return "value-template";
                    }
                }
            };

            ko.applyBindings(viewMode);
        });
    </script>

最后我們可以看到會按照我們的條件來輸出不同的模板了。