列表

要创建列表页, 首先要创建一个数据源, 我们在上一章节已经谈到, 比如ContentList数据源。 之后, 你需要用模板循环显示数据。

列表 

选择你要循环的元素, 你可以从预览窗口中选择或者从代码窗口中选择,选择完成后点击右侧的"循环"按键

在弹出的窗口中,选择数据源

在创建完循环项后,你还需要将数据绑定到具体的标签元素中。不然,循环项将只循环这个标签的静态数据,也就是代码中的固定值。我们将在后面的章节具体讲述数据绑定。

重复自身

重复自身是一个选项决定是循环父元素还是仅仅子元素。比如:  

<div k-foreach='item list' repeat-self> 
<p k-content='item.name'>my name</p>
</div>

选中重复自身: DIV 与 P 会一起循环显示。

没选重复自身: 只有里面的P标签会循环显示 

嵌套列表

有些情况下你需要使用嵌套列表。例如我们的文档目录,在一些主目录下还有一些二级目录。

在这个情况下,我们可以创建一个循环项来循环主目录,同时做一个关联子查询。

首先,你需要创建一个叫“Main Category”的主目录内容数据类型并创建几个主目录。

接着,创建一个叫做“Subcategory”的二级内容目录数据类型或是用相同的数据类型新建一个文件夹。

在导航菜单上点击内容-内容选项。点击Subcategory右侧的设置按键, 为这两个内容文件夹建立相应的关联关系。

切换到“关联数据”标签页,在类别数据后面点击“+”按键。选择主菜单文件夹“Main_Category”并设置一个别名。

返回并创建一个新的Subcategory内容项,你可以看到在创建的时候多了一个选择主目录的选项。

创建一个新的组件,使用以下代码来建立一个目录模板。

添加数据源并设置别名。

选择内容文件夹。

因为这是个嵌套的列表, 我们需要设置关系查询。点击主菜单数据右侧的“+”按键。

我们需要根据主菜单的不同显示相应的二级菜单,所以在这里我们需要选择根据类目“by category”类型的数据源,并设置一个别名。

回到数据绑定标签页,首先我们需要创建一个循环项。确保你选择了主菜单的<ul>标签。

点击“循环”按键并选择数据源。

接着在这个循环项中创建嵌套的循环项,选择二级菜单的<li>标签创建循环项。

选择子查询做为数据源

接着,我们只需要将数据绑定到相应的标签元素上。首先,我们将把数据绑定到主菜单。选择主菜单的<h2>标签并点击数据,将其绑定到主菜单的名字字段。

选择二级菜单并将其绑定到二级菜单的名字字段。

现在预览这个组件,你可以看到这个嵌套循环项已经完成了。