建立檢視 (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>

大多數元素用於 Bootstrap 樣式。 重要項目是具有 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 會建立新的

  • 元素。 在 foreach 的內容中，繫結會指向陣列項目的屬性。 例如：

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

    在這裡，text 繫結會讀取每本書的作者屬性。

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

    應用程式視窗的螢幕擷取畫面顯示 [書籍] 窗格，列出書籍和對應的詳細資料連結。

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

    上一個下一個

    • Last updated on