Crear la vista (IU)

Descargar el proyecto completado

En esta sección, comenzará a definir el código HTML de la aplicación y agregar enlaces de datos entre el código HTML y el modelo de vista.

Abra el archivo Views/Home/Index.cshtml. Reemplace todo el contenido de ese archivo por lo siguiente.

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

La mayoría de los elementos div existen para el estilo Arranque. Los elementos importantes son aquellos con los atributos data-bind. Este atributo vincula el código HTML al modelo de vista.

Por ejemplo:

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

En este ejemplo, el enlace "text" hace que el elemento <p> muestre el valor de la propiedad error desde el modelo de vista. Recuerde que error se declaró como ko.observable:

self.error = ko.observable();

Cada vez que se asigna un nuevo valor a error, Knockout actualiza el texto del elemento <p>.

El enlace foreach indica a Knockout que recorra en bucle el contenido de la matriz books. Para cada elemento de la matriz, Knockout crea un nuevo elemento <li>. Los enlaces dentro del contexto de foreach hacen referencia a las propiedades del elemento de la matriz. Por ejemplo:

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

Aquí el enlace text lee la propiedad Author de cada libro.

Si ejecuta la aplicación ahora, debería tener este aspecto:

La lista de libros se carga de forma asincrónica después de que se cargue la página. En este momento, los vínculos "Detalles" no son funcionales. Agregaremos esta funcionalidad en la sección siguiente.

AnteriorSiguiente