WeX5数据绑定：foreach绑定

//.W片段
<table>
 <thead>
 <tr><th>First name</th><th>Last name</th></tr>
 </thead>
 <tbody bind-foreach="people">
 <tr>
 <td bind-text="firstName"></td>
 <td bind-text="lastName"></td>
 </tr>
 </tbody>
</table> 

//.js片段
people=[
 { firstName: 'Bert', lastName: 'Bertington' },
 { firstName: 'Charles', lastName: 'Charlesforth' },
 { firstName: 'Denise', lastName: 'Dentiste' }
 ]

绑定规则：

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

binding context

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

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

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

$data示例：

//.W片段
<ul bind-foreach="months">
    <li>
        The current item is: <b data-bind="text: $data"></b>
    </li>
</ul>

//.js片段
months= ['Jan', 'Feb', 'Mar', 'etc']

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

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

$index和$parent示例：

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

使用别名 as

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

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

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

下面是一个完整的例子

//.W片段
<ul bind-foreach="{ data: categories, as: 'category' }">
    <li>
        <ul bind-foreach="{ data: items, as: 'item' }">
            <li>
                <span bind-text="category.name"></span>:
                <span bind-text="item"></span>
            </li>
        </ul>
    </li>
</ul>

//.js片段
        categories=justep.Bind.observableArray([
            { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
            { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
        ])

不使用container

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

//.W片段
<ul>
    <li class="header">Header item</li>
    <!-- justep.Bind foreach: myItems -->
        <li>Item <span bind-text="$data"></span></li>
    <!-- /justep.Bind-->
</ul>

//.js片段
myItems=['A', 'B', 'C']

这种方法非常实用。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443