创建列表

列表页与详情页是最常见的开发任务, 接下来的文章说明如何使用View的设计器来做列表与详情页。

首先, 创建一个组件, 然后添加数据与绑定数据到模板。 

添加数据源

在相应组件的编辑页面, 点击右侧顶部的‘数据’标签,然后点击‘+’按键来添加数据来源。

在弹出的窗口中,选择数据源ContentList – ByFolder,把别名改成‘blog_list’,点击下一步。

选择‘博客文章’文件夹并点击保存。

 

创建循环列表

点击"数据绑定"标签, 回到组件的编辑界面,你目前应该依前一章的做法有一个简单列表模板, 我们需要循环展示这个列表。

你可以在预览窗口选择如下图的最外部的框架,如下图

或者在代码窗口选择第一个<div>标签

确保你选择了正确的<div>标签,在预览窗口中将会有一个红框表示你所选择的项目。点击右侧的‘循环’按键来创建一个循环项。

选择需要循环的项为‘blog_list’,记得勾选重复自身,因为我们需要循环的是整个结构包括他的父元素。点击保存。

数据绑定

现在我们需要将数据绑定到指定的字段位置上。首先我们要绑定的是标题,在预览窗口中点选标题,如下图所示,然后在数据绑定栏下点击‘数据’按键。

因为我们需要显示的是博客的标题,所以选择 ‘blog_list_item.Title’。点击保存,然后继续按此操作绑定发布日期和主要内容。

我们将在后面的章节中介绍怎么绑定‘阅读更多’按键。现在只需点击保存&返回即可。