Nézet létrehozása (felhasználói felület)

Befejezett projekt letöltése

Ebben a szakaszban meg kell határoznia az alkalmazás HTML-kódját, és adatkötést kell hozzáadnia a HTML és a nézetmodell között.

Nyissa meg a Views/Home/Index.cshtml fájlt. Cserélje le a fájl teljes tartalmát a következőre.

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

A div legtöbb elem a Bootstrap-stílushoz szükséges. A fontos elemek azok, amelyek a data-bind attribútumokkal rendelkeznek. Ez az attribútum a HTML-et a nézetmodellhez csatolja.

Például:

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

Ebben a példában a "text" kötés miatt az <p> elem megjeleníti a error tulajdonság értékét a nézetmodellből. Ne feledje, hogy a error következőként ko.observablelett deklarálva:

self.error = ko.observable();

Amikor új érték van hozzárendelve error, a Knockout frissíti az elem szövegét <p>.

A foreach kötés arra utasítja a Knockoutot, hogy végighaladjon a books tömb elemein. A tömb minden eleméhez a Knockout létrehoz egy új <li> elemet. A foreach környezetén belüli kötési pontok a tömbelem tulajdonságaira hivatkoznak. Például:

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

Itt a text kötés kiolvassa az egyes könyv Szerző tulajdonságát.

Ha most futtatja az alkalmazást, annak a következőképpen kell kinéznie:

A könyvek listája aszinkron módon töltődik be az oldal betöltése után. Jelenleg a "Részletek" hivatkozások nem működnek. Ezt a funkciót a következő szakaszban fogjuk hozzáadni.

ElőzőKövetkező