建立檢視 (UI)

下載已完成的專案

在本節中，您將開始定義應用程式的 HTML，並在 HTML 與檢視模型之間新增資料繫結。

開啟檔案 Views/Home/Index.cshtml。 將檔案的全部內容替換為以下內容。

@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 項目都用於啟動程序樣式。 重要項目是具有 data-bind 屬性的項目。 此屬性會將 HTML 連結至檢視模型。

例如：

<p data-bind="text: error">

在此範例中，「text」繫結會使 <p> 項目從檢視模型顯示 error 屬性的值。 回想一下 error 被宣告為 ko.observable：

self.error = ko.observable();

每當指派新的值到 error 時，Knockout 就會更新 <p> 項目中的文字。

foreach 繫結會指示 Knockout 循環使用 books 陣列的內容。 針對陣列中的每個項目，Knockout 會建立新的 <li> 項目。 foreach 內容內的繫結會參考陣列項目的屬性。 例如：

<span data-bind="text: Author"></span>

此處的 text 繫結匯讀取每本書的作者屬性。

如果您現在執行應用程式，它看起來應該像這樣：

頁面載入之後，書籍清單會以非同步方式載入。 現在，「詳細資料」連結無法運作。 我們將在下一節中新增此功能。