在本節(jié)，你將添加查看每本書(shū)的詳細(xì)信息的功能。在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，添加一個(gè)數(shù)據(jù)綁定元素到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 >元素綁定了一個(gè)在視圖模型中調(diào)用getBookDetail函數(shù)的點(diǎn)擊事件。

在同一個(gè)文件，替換以下代碼：

<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 -->

這段代碼創(chuàng)建了一個(gè)綁定到視圖模型中details各個(gè)屬性的表。

其中的“<!—ko -->”句法讓你在DOM元素外部包括一個(gè)Knockout綁定。在本例中，if綁定導(dǎo)致本節(jié)的標(biāo)記要顯示詳細(xì)信息時(shí)才為非空。

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

現(xiàn)在如果你運(yùn)行這個(gè)應(yīng)用程序，并點(diǎn)擊其中一個(gè)“Detail“鏈接，這個(gè)app會(huì)展示出book的詳細(xì)信息。