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.
Comentarios
https://aka.ms/ContentUserFeedback.
Próximamente: A lo largo de 2024 iremos eliminando gradualmente las Cuestiones de GitHub como mecanismo de retroalimentación para el contenido y lo sustituiremos por un nuevo sistema de retroalimentación. Para más información, consulta:Enviar y ver comentarios de