【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)-阿里云开发者社区

开发者社区> nomasp> 正文

【Web API系列教程】3.8 — 实战:处理数据(显示条目细节)

简介: 在本节,你将添加查看每本书的详细信息的功能。在app.js中,添加以下代码到视图模型: self.detail = ko.
+关注继续查看

在本节,你将添加查看每本书的详细信息的功能。在app.js中,添加以下代码到视图模型:

self.detail = ko.observable();

self.getBookDetail = function (item) {
    ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
        self.detail(data);
    });
}

在Views/Home/Index.cshtml,添加一个数据绑定元素到Details链接:

<ul class="list-unstyled" data-bind="foreach: books">
  <li>
    <strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
    <!-- New code -->
    <small><a href="#" data-bind="click: $parent.getBookDetail">Details</a></small>
  </li>
</ul>

它为< a >元素绑定了一个在视图模型中调用getBookDetail函数的点击事件。

在同一个文件,替换以下代码:

<div class="col-md-4">
    <!-- TODO: Book details -->
</div>

到:

<!-- ko if:detail() -->

<div class="col-md-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Detail</h2>
  </div>
  <table class="table">
    <tr><td>Author</td><td data-bind="text: detail().AuthorName"></td></tr>
    <tr><td>Title</td><td data-bind="text: detail().Title"></td></tr>
    <tr><td>Year</td><td data-bind="text: detail().Year"></td></tr>
    <tr><td>Genre</td><td data-bind="text: detail().Genre"></td></tr>
    <tr><td>Price</td><td data-bind="text: detail().Price"></td></tr>
  </table>
</div>
</div>

<!-- /ko -->

这段代码创建了一个绑定到视图模型中details各个属性的表。

其中的“

<!-- ko if:detail() -->

现在如果你运行这个应用程序,并点击其中一个“Detail“链接,这个app会展示出book的详细信息。

这里写图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ML之catboost:catboost模型中常用的Pool类型数据结构源代码解读、案例应用之详细攻略(一)
ML之catboost:catboost模型中常用的Pool类型数据结构源代码解读、案例应用之详细攻略
23 0
史上最快! 10小时大数据入门实战(九)- 前沿技术拓展Spark,Flink,Beam
spark Spark 开发语言及运行模式介绍 Scala安装 下载 Scala ...
1430 0
Python系列直播——深入Python与日志服务,玩转大规模数据分析处理实战
Python系列直播——深入Python与日志服务,玩转大规模数据分析处理实战
4837 0
PostgreSQL不同模式(SCHEMA)之间迁移数据
PostgreSQL不同模式(SCHEMA)之间迁移数据。
8219 0
独家 | ARIMA/Sarima与LSTM的时间序列数据集成学习(附链接)
本文探讨了简单的ARIMA/Sarima与LSTM的时间序列数据集成学习方面的问题。
1585 0
使用 Kafka + Spark Streaming + Cassandra 构建数据实时处理引擎
Apache Kafka 是一个可扩展,高性能,低延迟的平台,允许我们像消息系统一样读取和写入数据。我们可以很容易地在 Java 中使用 Kafka。 Spark Streaming 是 Apache Spark 的一部分,是一个可扩展、高吞吐、容错的实时流处理引擎。
2821 0
+关注
542
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载