Bagian 5: Membuat UI Dinamis dengan Knockout.js

oleh Rick Anderson

Unduh Proyek yang Selesai

Membuat UI Dinamis dengan Knockout.js

Di bagian ini, kita akan menggunakan Knockout.js untuk menambahkan fungsionalitas ke tampilan Admin.

Knockout.js adalah pustaka Javascript yang memudahkan untuk mengikat kontrol HTML ke data. Knockout.js menggunakan pola Model-View-ViewModel (MVVM).

• Model ini adalah representasi sisi server dari data di domain bisnis (dalam kasus kami, produk, dan pesanan).
• Tampilan adalah lapisan presentasi (HTML).
• Model tampilan adalah objek Javascript yang menyimpan data model. Model tampilan adalah abstraksi kode UI. Ini tidak memiliki pengetahuan tentang representasi HTML. Sebaliknya, ini mewakili fitur abstrak tampilan, seperti "daftar item".

Tampilan terikat dengan data ke view-model. Updates ke model tampilan secara otomatis tercermin dalam tampilan. Model tampilan juga mendapatkan peristiwa dari tampilan, seperti klik tombol, dan melakukan operasi pada model, seperti membuat pesanan.

Diagram yang memperlihatkan interaksi antara data H T M L, model tampilan, j putra, dan pengontrol Web A P I. Kotak data H T M L diberi label tampilan. Panah ganda berlabel pengikatan data menautkan kotak data H T M L ke kotak model tampilan. Panah ganda berlabel permintaan H T T P dan model j son dari server menautkan model tampilan ke pengontrol Web A P I.

Pertama, kita akan mendefinisikan view-model. Setelah itu, kita akan mengikat markup HTML ke view-model.

Tambahkan bagian Razor berikut ke Admin.cshtml:

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script> 
  <script type="text/javascript">
  // View-model will go here
  </script>
}

Anda dapat menambahkan bagian ini di mana saja dalam file. Saat tampilan dirender, bagian muncul di bagian bawah halaman HTML, tepat sebelum <tag penutup /isi> .

Semua skrip untuk halaman ini akan masuk ke dalam tag skrip yang ditunjukkan oleh komentar:

<script type="text/javascript">
  // View-model will go here
  </script>

Pertama, tentukan kelas model tampilan:

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();
}

ko.observableArray adalah jenis objek khusus di Knockout, yang disebut dapat diamati. Dari dokumentasiKnockout.js: Yang dapat diamati adalah "objek JavaScript yang dapat memberi tahu pelanggan tentang perubahan." Saat konten perubahan yang dapat diamati, tampilan secara otomatis diperbarui agar cocok.

Untuk mengisi products array, buat permintaan AJAX ke API web. Ingat bahwa kami menyimpan URI dasar untuk API di tas tampilan (lihat Bagian 4 tutorial).

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();

    // New code
    var baseUri = '@ViewBag.ApiUrl';
    $.getJSON(baseUri, self.products);
}

Selanjutnya, tambahkan fungsi ke model tampilan untuk membuat, memperbarui, dan menghapus produk. Fungsi-fungsi ini mengirimkan panggilan AJAX ke API web dan menggunakan hasilnya untuk memperbarui model tampilan.

function ProductsViewModel() {
    var self = this;
    self.products = ko.observableArray();

    var baseUri = '@ViewBag.ApiUrl';

    // New code
    self.create = function (formElement) {
        // If the form data is valid, post the serialized form data to the web API.
        $(formElement).validate();
        if ($(formElement).valid()) {
            $.post(baseUri, $(formElement).serialize(), null, "json")
                .done(function (o) { 
                    // Add the new product to the view-model.
                    self.products.push(o); 
                });
        }
    }

    self.update = function (product) {
        $.ajax({ type: "PUT", url: baseUri + '/' + product.Id, data: product });
    }

    self.remove = function (product) {
        // First remove from the server, then from the view-model.
        $.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })
            .done(function () { self.products.remove(product); });
    }

    $.getJSON(baseUri, self.products);
}

Sekarang bagian terpenting: Ketika DOM dimuat penuh, panggil fungsi ko.applyBindings dan berikan instans baru dari ProductsViewModel:

$(document).ready(function () {
    ko.applyBindings(new ProductsViewModel());
})

Metode ko.applyBindings mengaktifkan Knockout dan menghubungkan model tampilan ke tampilan.

Sekarang setelah kita memiliki model tampilan, kita dapat membuat pengikatan. Dalam Knockout.js, Anda melakukan ini dengan menambahkan data-bind atribut ke elemen HTML. Misalnya, untuk mengikat daftar HTML ke array, gunakan pengikatan foreach :

<ul id="update-products" data-bind="foreach: products">

Pengikatan foreach berulang melalui array dan membuat elemen anak untuk setiap objek dalam array. Pengikatan pada elemen anak dapat merujuk ke properti pada objek array.

Tambahkan pengikatan berikut ke daftar "update-products":

<ul id="update-products" data-bind="foreach: products">
    <li>
        <div>
            <div class="item">Product ID</div> <span data-bind="text: $data.Id"></span>
        </div>
        <div>
            <div class="item">Name</div> 
            <input type="text" data-bind="value: $data.Name"/>
        </div> 
        <div>
            <div class="item">Price ($)</div> 
            <input type="text" data-bind="value: $data.Price"/>
        </div>
        <div>
            <div class="item">Actual Cost ($)</div> 
            <input type="text" data-bind="value: $data.ActualCost"/>
        </div>
        <div>
            <input type="button" value="Update" data-bind="click: $root.update"/>
            <input type="button" value="Delete Item" data-bind="click: $root.remove"/>
        </div>
    </li>
</ul>

Elemen <li> terjadi dalam cakupan pengikatan foreach . Itu berarti Knockout akan merender elemen sekali untuk setiap produk dalam products array. Semua pengikatan dalam elemen mengacu pada instans produk tersebut <li> . Misalnya, $data.Name mengacu pada Name properti pada produk.

Untuk mengatur nilai input teks, gunakan pengikatan value . Tombol terikat ke fungsi pada tampilan model, menggunakan pengikatan click . Instans produk diteruskan sebagai parameter ke setiap fungsi. Untuk informasi lebih lanjut, dokumentasiKnockout.js memiliki deskripsi yang baik tentang berbagai pengikatan.

Selanjutnya, tambahkan pengikatan untuk acara kirim pada formulir Tambahkan Produk:

<form id="addProduct" data-bind="submit: create">

Pengikatan ini memanggil create fungsi pada view-model untuk membuat produk baru.

Berikut adalah kode lengkap untuk tampilan Admin:

@model ProductStore.Models.Product

@{
    ViewBag.Title = "Admin";
}

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.0.0.js")"></script> 
  <script type="text/javascript">
      function ProductsViewModel() {
          var self = this;
          self.products = ko.observableArray();

          var baseUri = '@ViewBag.ApiUrl';

          self.create = function (formElement) {
              // If valid, post the serialized form data to the web api
              $(formElement).validate();
              if ($(formElement).valid()) {
                  $.post(baseUri, $(formElement).serialize(), null, "json")
                      .done(function (o) { self.products.push(o); });
              }
          }

          self.update = function (product) {
              $.ajax({ type: "PUT", url: baseUri + '/' + product.Id, data: product });
          }

          self.remove = function (product) {
              // First remove from the server, then from the UI
              $.ajax({ type: "DELETE", url: baseUri + '/' + product.Id })
                  .done(function () { self.products.remove(product); });
          }

          $.getJSON(baseUri, self.products);
      }

      $(document).ready(function () {
          ko.applyBindings(new ProductsViewModel());
      })
  </script>
}

<h2>Admin</h2>
<div class="content">
    <div class="float-left">
    <ul id="update-products" data-bind="foreach: products">
        <li>
            <div>
                <div class="item">Product ID</div> <span data-bind="text: $data.Id"></span>
            </div>
            <div>
                <div class="item">Name</div> 
                <input type="text" data-bind="value: $data.Name"/>
            </div> 
            <div>
                <div class="item">Price ($)</div> 
                <input type="text" data-bind="value: $data.Price"/>
            </div>
            <div>
                <div class="item">Actual Cost ($)</div> 
                <input type="text" data-bind="value: $data.ActualCost"/>
            </div>
            <div>
                <input type="button" value="Update" data-bind="click: $root.update"/>
                <input type="button" value="Delete Item" data-bind="click: $root.remove"/>
            </div>
        </li>
    </ul>
    </div>

    <div class="float-right">
    <h2>Add New Product</h2>
    <form id="addProduct" data-bind="submit: create">
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Contact</legend>
            @Html.EditorForModel()
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </div>
</div>

Jalankan aplikasi, masuk dengan akun Administrator, dan klik tautan "Admin". Anda akan melihat daftar produk, dan dapat membuat, memperbarui, atau menghapus produk.

SebelumnyaBerikutnya