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>

最后我们可以看到会按照我们的条件来输出不同的模板了。