Creación de la vista (UI)

Descargar el proyecto completado

En esta sección, comenzará a definir el CÓDIGO HTML de la aplicación y agregará enlace 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 div elementos están ahí para el estilo bootstrap . Los elementos importantes son los que tienen data-bind atributos. 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 del 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 <p> elemento .

El foreach enlace indica a Knockout que recorra el contenido de la books matriz. Para cada elemento de la matriz, Knockout crea un nuevo <elemento li> . Enlaces dentro del contexto de la foreach se refieren a las propiedades del elemento del array. Por ejemplo:

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

Aquí la text vinculación 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.