【Web API系列教程】3.7 — 实战:处理数据(创建UI视图)
2016-02-27 09:19
405 查看
在本节,你将开始为app定义HTML,并在HTML和视图模型间添加数据绑定。
打开Views/Home/Index.cshtml文件。用以下代码替换掉文件的所有内容。
这里的绝大部分div元素都是Bootstrap风格,它是有着数据绑定属性的重要元素。这个元素将HTML链接到视图模型中。
例如:
在这个示例中,“text”绑定会使得p元素显示在视图模型中error属性的值。error的回调被声明在ko.obserable中:
无论何时一个新值被修改到error上,Knockout都会在< p >元素上更新该文本。
而foreach绑定告诉Knockout在books数组中循环遍历。对于该数组的每一项,Knockout会创建一个新的< li >元素。绑定foreach引用的上下文到数组的每一项。例如:
这里有一个text绑定读取每一个book的Author属性。
如果你现在运行该应用程序,它看起来会是这样:
在页面加载后,books列表会被异步的加载。现在,“Details”链接还不具备功能。我们将在下一节为其添加此功能。
打开Views/Home/Index.cshtml文件。用以下代码替换掉文件的所有内容。
[code]@section scripts { @Scripts.Render("~/bundles/app") } <div class="page-header"> <h1>BookService</h1> </div> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Books</h2> </div> <div class="panel-body"> <ul class="list-unstyled" data-bind="foreach: books"> <li> <strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span> <small><a href="#">Details</a></small> </li> </ul> </div> </div> <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div> </div> <div class="col-md-4"> <!-- TODO: Book details --> </div> <div class="col-md-4"> <!-- TODO: Add new book --> </div> </div>
这里的绝大部分div元素都是Bootstrap风格,它是有着数据绑定属性的重要元素。这个元素将HTML链接到视图模型中。
例如:
[code]<p data-bind="text: error">
在这个示例中,“text”绑定会使得p元素显示在视图模型中error属性的值。error的回调被声明在ko.obserable中:
[code]self.error = ko.observable();
无论何时一个新值被修改到error上,Knockout都会在< p >元素上更新该文本。
而foreach绑定告诉Knockout在books数组中循环遍历。对于该数组的每一项,Knockout会创建一个新的< li >元素。绑定foreach引用的上下文到数组的每一项。例如:
[code]<span data-bind="text: Author"></span>
这里有一个text绑定读取每一个book的Author属性。
如果你现在运行该应用程序,它看起来会是这样:
在页面加载后,books列表会被异步的加载。现在,“Details”链接还不具备功能。我们将在下一节为其添加此功能。
相关文章推荐
- android.os.Build
- DE26 Continuation: Repeated Real Eigenvalues
- GlobalValue
- Increasing Triplet Subsequence
- 备注 break continue return
- 解决“Dynamic Web Module 3.0 requires Java 1.6
- ios 代码创建UIToolBar
- 2016/2/26 <marquee></marquee>实现多种滚动效果
- APUE之对于系统中缺失的error.c文件的阶段性总结
- [1005]: Number Sequence
- The 6th Zhejiang Provincial Collegiate Programming Contest->Problem I:A Stack or A Queue?
- 线上使用阿里Druid连接池首次连接MySQL异常问题
- UIdynamic
- 如何使easyui在没有数据的情况下显示滚动条
- ios-UI控件精讲之【6】UIButton
- Animation动画详解(八)——PropertyValuesHolder与Keyframe
- MySQL提示:The server quit without updating PID file问题的解决办法
- 多个构造参数考虑使用Builder构造器模式
- IOS-OC-基本控件之UIPageControl
- IOS-OC-基本控件之UIPageControl