Создание представления (пользовательского интерфейса)

Скачивание завершенного проекта

В этом разделе вы начнете определять 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. Важные элементы — это элементы с data-bind атрибутами. Этот атрибут связывает HTML-код с моделью представления.

Рассмотрим пример.

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

В этом примере привязка "text" делает так, что элемент <p> отображает значение свойства error из модели представления. Напомним, что error был объявлен как :ko.observable

self.error = ko.observable();

Всякий раз, когда новое значение назначается error, Нокаут обновляет текст в элементе <p> .

Привязка foreach сообщает Нокауту прокрутить содержимое массива books . Для каждого элемента в массиве Knockout создает новый <элемент li> . Привязки внутри контекста foreach ссылаются на свойства элемента массива. Рассмотрим пример.

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

Здесь привязка text считывает свойство Author каждой книги.

Если вы запускаете приложение сейчас, оно должно выглядеть следующим образом:

Список книг загружается асинхронно после загрузки страницы. Сейчас ссылки "Сведения" не работают. Мы добавим эту функцию в следующем разделе.

НазадДалее