Mostrar detalles del elemento

Descargar el proyecto completado

En esta sección, agregará la capacidad de ver los detalles de cada libro. En app.js, agregue al código siguiente al modelo de vista:

self.detail = ko.observable();

self.getBookDetail = function (item) {
    ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
        self.detail(data);
    });
}

En Views/Home/Index.cshtml, agregue un elemento de enlace de datos al vínculo Detalles:

<ul class="list-unstyled" data-bind="foreach: books">
  <li>
    <strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
    <!-- New code -->
    <small><a href="#" data-bind="click: $parent.getBookDetail">Details</a></small>
  </li>
</ul>

Esto enlaza el controlador de clics de un <elemento> a la función getBookDetail en el modelo de vista.

En el mismo archivo, reemplace el marcado siguiente:

<div class="col-md-4">
    <!-- TODO: Book details -->
</div>

por este:

<!-- ko if:detail() -->

<div class="col-md-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Detail</h2>
  </div>
  <table class="table">
    <tr><td>Author</td><td data-bind="text: detail().AuthorName"></td></tr>
    <tr><td>Title</td><td data-bind="text: detail().Title"></td></tr>
    <tr><td>Year</td><td data-bind="text: detail().Year"></td></tr>
    <tr><td>Genre</td><td data-bind="text: detail().Genre"></td></tr>
    <tr><td>Price</td><td data-bind="text: detail().Price"></td></tr>
  </table>
</div>
</div>

<!-- /ko -->

Este marcado crea una tabla enlazada a datos a las propiedades del observable detail en el modelo de vista.

La sintaxis "<-- ko -->" le permite incluir un enlace Knockout fuera de un elemento DOM. En este caso, el enlaceif hace que esta sección de marcado se muestre solo cuando details no es null.

<!-- ko if:detail() -->

Ahora, si ejecuta la aplicación y hace clic en uno de los vínculos "Detalle", la aplicación mostrará los detalles del libro.

AnteriorSiguiente