Skapa vyn (användargränssnittet)

Ladda ned slutfört projekt

I det här avsnittet börjar du definiera HTML för appen och lägga till databindning mellan HTML och vymodellen.

Öppna filen Views/Home/Index.cshtml. Ersätt hela innehållet i filen med följande.

@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>

De flesta elementen div finns där för Bootstrap styling. De viktiga elementen är de som har data-bind attribut. Det här attributet länkar HTML till vymodellen.

Som exempel:

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

I det här exemplet gör bindningen "text" att elementet <p> visar värdet error för egenskapen från vymodellen. Kom ihåg att error deklarerades som :ko.observable

self.error = ko.observable();

När ett nytt värde tilldelas till erroruppdaterar Knockout texten i elementet <p> .

Bindningen foreach instruerar Knockout att loopa igenom innehållet i matrisen books . För varje objekt i matrisen skapar Knockout ett nytt <li-element> . Bindningar i kontexten för foreach referera till egenskaper för matrisobjektet. Som exempel:

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

Här läser bindningen text egenskapen Author för varje bok.

Om du kör programmet nu bör det se ut så här:

Listan över böcker läses in asynkront när sidan har lästs in. Just nu fungerar inte "Information"-länkarna. Vi lägger till den här funktionen i nästa avsnitt.