Vytvoření zobrazení (UI)

Stáhnout dokončený projekt

V této části začnete definovat HTML pro aplikaci a přidáte datovou vazbu mezi HTML a modelem zobrazení.

Otevřete soubor Views/Home/Index.cshtml. Celý obsah tohoto souboru nahraďte následujícím kódem.

@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 Většina prvků je k dispozici pro styl bootstrap. Důležité prvky jsou ty, které mají data-bind atributy. Tento atribut propojuje kód HTML s modelem zobrazení.

Například:

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

V tomto příkladu vazba "text" způsobí, že element <p> zobrazí hodnotu vlastnosti error z pohledu modelu. Vzpomeňte si, že error byl deklarován jako ko.observable:

self.error = ko.observable();

Kdykoli je přiřazena errornová hodnota , Knockout aktualizuje text v elementu <p> .

Vazba foreach instruuje Knockout, aby procházel obsahem pole books. Pro každou položku v poli vytvoří Knockout nový <li> element. Vazby v kontextu foreach odkazují na vlastnosti položky v poli. Například:

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

Zde vazba text čte vlastnost Autor z každé knihy.

Pokud teď aplikaci spustíte, měla by vypadat takto:

Seznam knih se načte asynchronně po načtení stránky. Odkazy Podrobnosti teď nejsou funkční. Tuto funkci přidáme v další části.

PředchozíDalší