【Web API系列教程】3.7 — 實戰：處理資料（建立UI視圖）

在本節，你将開始為app定義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元素都是Bootstrap風格，它是有着資料綁定屬性的重要元素。這個元素将HTML連結到視圖模型中。

例如：

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

在這個示例中，“text”綁定會使得p元素顯示在視圖模型中error屬性的值。error的回調被聲明在ko.obserable中：

self.error = ko.observable();            

無論何時一個新值被修改到error上，Knockout都會在< p >元素上更新該文本。

而foreach綁定告訴Knockout在books數組中循環周遊。對于該數組的每一項，Knockout會建立一個新的< li >元素。綁定foreach引用的上下文到數組的每一項。例如：

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

這裡有一個text綁定讀取每一個book的Author屬性。

如果你現在運作該應用程式，它看起來會是這樣：

在頁面加載後，books清單會被異步的加載。現在，“Details”連結還不具備功能。我們将在下一節為其添加此功能。