【Web API系列教程】3.7 — 实战:处理数据(创建UI视图)
程序员文章站
2022-05-21 11:55:44
在本节,你将开始为app定义html,并在html和视图模型间添加数据绑定。
打开views/home/index.cshtml文件。用以下代码替换掉文件的所有内容。
&l...
在本节,你将开始为app定义html,并在html和视图模型间添加数据绑定。
打开views/home/index.cshtml文件。用以下代码替换掉文件的所有内容。
<code class=" hljs xml">@section scripts { @scripts.render("~/bundles/app") } </code>
bookservice
books
: details
这里的绝大部分p元素都是bootstrap风格,它是有着数据绑定属性的重要元素。这个元素将html链接到视图模型中。
例如:
在这个示例中,“text”绑定会使得p元素显示在视图模型中error属性的值。error的回调被声明在ko.obserable中:
self.error = ko.observable();
无论何时一个新值被修改到error上,knockout都会在< p >元素上更新该文本。
而foreach绑定告诉knockout在books数组中循环遍历。对于该数组的每一项,knockout会创建一个新的< li >元素。绑定foreach引用的上下文到数组的每一项。例如:
这里有一个text绑定读取每一个book的author属性。
如果你现在运行该应用程序,它看起来会是这样:
在页面加载后,books列表会被异步的加载。现在,“details”链接还不具备功能。我们将在下一节为其添加此功能。
上一篇: Flex 布局初学
下一篇: 国内H5页面制作工具评测 iH5名列前茅
推荐阅读
-
【Web API系列教程】3.4 — 实战:处理数据(处理实体关系)
-
【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)
-
【Web API系列教程】3.1 — 实战:处理数据(创建项目)
-
【Web API系列教程】3.3 — 实战:处理数据(建立数据库)
-
【Web API系列教程】3.10 — 实战:处理数据(发布App到Azure App Service)
-
【Web API系列教程】3.7 — 实战:处理数据(创建UI视图)
-
【Web API系列教程】3.5 — 实战:处理数据(创建数据传输对象)
-
【Web API系列教程】3.3 — 实战:处理数据(建立数据库)
-
【Web API系列教程】3.2 — 实战:处理数据(添加模型和控制器)
-
【Web API系列教程】3.10 — 实战:处理数据(发布App到Azure App Service)