顯示項目詳細資料

下載已完成的專案

在本節中，您將新增檢視每本書詳細資料的能力。 在 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 中，將資料繫結項目新增至 [詳細資料] 連結：

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

這會將 < 項目的 Click 處理常式繫結到檢視模型上的 > 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 -->

此標記會建立一個資料繫結到檢視模型中 detail 可觀察的屬性的資料表。

「<!-- ko -->」語法允許您在 DOM 項目外部包含 Knockout 繫結。 在此情況下，if 繫結只會在 details 非 Null 時顯示標記的這個區段。

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

現在，如果您執行應用程式並按一下其中一個「詳細資料」連結，應用程式將會顯示書籍詳細資料。

上一個下一個