在本節(jié)，你將開始為app定義HTML，并在HTML和視圖模型間添加數(shù)據(jù)綁定。

打開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風格，它是有著數(shù)據(jù)綁定屬性的重要元素。這個元素將HTML鏈接到視圖模型中。

例如：

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

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

self.error = ko.observable(); 

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

而foreach綁定告訴Knockout在books數(shù)組中循環(huán)遍歷。對于該數(shù)組的每一項，Knockout會創(chuàng)建一個新的< li >元素。綁定foreach引用的上下文到數(shù)組的每一項。例如：

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

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

如果你現(xiàn)在運行該應用程序，它看起來會是這樣：

在頁面加載后，books列表會被異步的加載?，F(xiàn)在，“Details”鏈接還不具備功能。我們將在下一節(jié)為其添加此功能。