Tworzenie widoku (interfejs użytkownika)

Pobieranie ukończonego projektu

W tej sekcji zaczniesz definiować kod HTML dla aplikacji i dodawać powiązanie danych między kodem HTML i modelem widoku.

Otwórz plik Views/Home/Index.cshtml. Zastąp całą zawartość tego pliku następującym kodem.

@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 Większość elementów jest dostępna dla stylu Bootstrap. Ważnymi elementami są te z atrybutami data-bind . Ten atrybut łączy kod HTML z modelem widoku.

Na przykład:

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

W tym przykładzie powiązanie "text" powoduje <p> , że element wyświetla wartość error właściwości z modelu widoku. Pamiętaj, że error został zadeklarowany jako :ko.observable

self.error = ko.observable();

Za każdym razem, gdy nowa wartość zostanie przypisana do errorelementu , funkcja Knockout aktualizuje tekst w elemecie <p> .

Powiązanie foreach informuje knockout, aby przechodził w pętlę przez zawartość tablicy books . Dla każdego elementu w tablicy funkcja Knockout tworzy nowy <element li> . Powiązania wewnątrz kontekstu foreach odwołania do właściwości elementu tablicy. Na przykład:

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

text Tutaj powiązanie odczytuje właściwość Author każdej książki.

Jeśli teraz uruchomisz aplikację, powinna ona wyglądać następująco:

Lista książek jest ładowana asynchronicznie po załadowaniu strony. W tej chwili linki "Szczegóły" nie działają. Ta funkcja zostanie dodana w następnej sekcji.

WsteczDalej