ビューの作成 (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 プロパティを読み取ります。

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

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

前へ次へ