Membuat Tampilan (UI)

Unduh Proyek yang Selesai

Di bagian ini, Anda akan mulai menentukan HTML untuk aplikasi, dan menambahkan pengikatan data antara HTML dan model tampilan.

Buka file Views/Home/Index.cshtml. Ganti seluruh konten file tersebut dengan yang berikut ini.

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

Sebagian div besar elemen ada untuk gaya Bootstrap . Elemen penting adalah elemen yang memiliki data-bind atribut. Atribut ini menautkan HTML ke model tampilan.

Contohnya:

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

Dalam contoh ini, pengikatan "text" menyebabkan <p> elemen menunjukkan nilai error properti dari model tampilan. Pengenalan yang error dinyatakan sebagai ko.observable:

self.error = ko.observable();

Setiap kali nilai baru ditetapkan ke error, Knockout memperbarui teks dalam <p> elemen .

Pengikatan foreach memberi tahu Knockout untuk mengulang konten books array. Untuk setiap item dalam array, Knockout membuat elemen li> baru<. Pengikatan di dalam konteks foreach referensi ke properti pada item array. Contohnya:

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

Di sini pengikatan text membaca properti Penulis dari setiap buku.

Jika Anda menjalankan aplikasi sekarang, aplikasi akan terlihat seperti ini:

Daftar buku dimuat secara asinkron, setelah halaman dimuat. Saat ini, tautan "Detail" tidak berfungsi. Kami akan menambahkan fungsionalitas ini di bagian berikutnya.

SebelumnyaBerikutnya