要创建列表页, 首先要创建一个数据源, 我们在上一章节已经谈到, 比如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>标签并点击数据,将其绑定到主菜单的名字字段。
选择二级菜单并将其绑定到二级菜单的名字字段。
现在预览这个组件,你可以看到这个嵌套循环项已经完成了。