zoukankan      html  css  js  c++  java
  • KnockoutJS学习笔记10:KonckoutJS foreach绑定

     

    KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中。在foreach绑定中,我们可以使用if、with等嵌套绑定。

    示例代码:

    <table>
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>
     
    <script type="text/javascript">
        ko.applyBindings({
            people: [
                { firstName: 'Bert', lastName: 'Bertington' },
                { firstName: 'Charles', lastName: 'Charlesforth' },
                { firstName: 'Denise', lastName: 'Dentiste' }
            ]
        });
    </script>

    绑定规则:

    在ViewModel中,people是一个数组,foreach绑定将会遍历这个数组,将每一项生成一个tr,然后添加在tbody中。

    binding context

    在foreach中,我们可以使用绑定上下文,完整的绑定上下文包括:

    • $data:当前项的数据
    • $index:当前项的序号
    • $parent:当前项的父级数据

    要了解更多,请参考完整的数据上下文。

    $data示例:

    <ul data-bind="foreach: months">
        <li>
            The current item is: <b data-bind="text: $data"></b>
        </li>
    </ul>
     
    <script type="text/javascript">
        ko.applyBindings({
            months: ['Jan', 'Feb', 'Mar', 'etc']
        });
    </script>

    如果$data是一个json对象,可以这样使用:

    <td data-bind="text: $data.firstName"></td>

    $index和$parent示例:

    <h1 data-bind="text: blogPostTitle"></h1>
    <ul data-bind="foreach: likes">
        <li>
            <b data-bind="text: name"></b> likes the blog post 
            <b data-bind="    text: $parent.blogPostTitle"></b>
        </li>
    </ul>

    使用别名 as

    尽管可以方便的使用上下文数据,但有些时候给$data起一个更有意义的别名更容易理解,我们来看看as关键字的用法:

    <ul data-bind="foreach: { data: people, as: 'person' }"></ul>

    在这段代码中,people的每一个数据项被当作person来访问,其实person就是$data

    下面是一个完整的例子:

    <ul data-bind="foreach: { data: categories, as: 'category' }">
        <li>
            <ul data-bind="foreach: { data: items, as: 'item' }">
                <li>
                    <span data-bind="text: category.name"></span>:
                    <span data-bind="text: item"></span>
                </li>
            </ul>
        </li>
    </ul>
     
    <script>
        var viewModel = {
            categories: ko.observableArray([
                { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
                { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
            ])
        };
        ko.applyBindings(viewModel);
    </script>

    不使用container

    在前面的内容中我们介绍了使用虚拟节点来完成绑定,这种虚拟节点同样能够用在foreach绑定中,示例代码:

    <ul>
        <li class="header">Header item</li>
        <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
        <!-- /ko -->
    </ul>
     
    <script type="text/javascript">
        ko.applyBindings({
            myItems: ['A', 'B', 'C']
        });
    </script>

    这种方法非常实用。

  • 相关阅读:
    Ant 中作用代理
    linux通用自动清理日志脚本
    linux shell 脚本攻略 下
    我在写shell自动部署脚本碰到的问题
    linux shell 脚本攻略(上)
    Java Object.wait() jvm的bug
    shell 脚本 更新或者添加host ,并且增加hostname映射到hosts (修改)
    记一次子域名IP搜集reconngkali
    ie6下面试用png使用滤镜需知
    canvas 使用 图片 切片的时候 在chrome 下 要注意的 一点
  • 原文地址:https://www.cnblogs.com/TF12138/p/4154015.html
Copyright © 2011-2022 走看看