ビューの作成 (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バインディングは、books配列の内容をループするように Knockout に指示します。 配列内の各項目に対して、Knockout によって新しい <li> 要素が作成されます。 foreachのコンテキスト内のバインドは、配列項目のプロパティを参照します。 例えば次が挙げられます。

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

ここでは、 text バインドは、各書籍の Author プロパティを読み取ります。

ここでアプリケーションを実行すると、次のようになります。

ブックの一覧は、ページの読み込み後に非同期的に読み込まれます。 現時点では、[詳細] リンクは機能していません。 この機能は、次のセクションで追加します。