Bölüm 5: Knockout.js ile Dinamik Kullanıcı Arabirimi Oluşturma

tarafından Rick Anderson

Tamamlanan Projeyi İndir

Knockout.js ile Dinamik Kullanıcı Arabirimi Oluşturma

Bu bölümde, Yönetici görünümüne işlevsellik eklemek için Knockout.js kullanacağız.

Knockout.js , HTML denetimlerini verilere bağlamayı kolaylaştıran bir Javascript kitaplığıdır. Knockout.js Model-View-ViewModel (MVVM) desenini kullanır.

• Model, iş etki alanındaki (bizim örneğimizde, ürünler ve siparişler) verilerin sunucu tarafı gösterimidir.
• Görünüm, sunu katmanıdır (HTML).
• Görünüm modeli, model verilerini tutan bir Javascript nesnesidir. Görünüm modeli, kullanıcı arabiriminin kod soyutlamasıdır. HTML gösterimi hakkında bilgisi yoktur. Bunun yerine, görünümün "öğe listesi" gibi soyut özelliklerini temsil eder.

Görünüm, görünüm modeline verilere bağlıdır. Görünüm modeline Güncelleştirmeler otomatik olarak görünüme yansıtılır. Görünüm modeli ayrıca görünümden düğme tıklamaları gibi olayları alır ve model üzerinde sipariş oluşturma gibi işlemler gerçekleştirir.

H T M L verileri, görünüm modeli, j son ve Web A P I denetleyicisi arasındaki etkileşimi gösteren diyagram. H T M L veri kutusu etiketli görünümdür. Veri bağlama etiketli çift ok, H T M L veri kutusunu görünüm modeli kutusuna bağlar. H T T P istekleri etiketli çift ok ve sunucudan j son modeli görünüm modelini Web A P I denetleyicisine bağlar.

İlk olarak görünüm modelini tanımlayacağız. Bundan sonra, HTML işaretlemesini görünüm modeline bağlayacağız.

aşağıdaki Razor bölümünü Yönetici.cshtml dosyasına ekleyin:

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

Bu bölümü dosyanın herhangi bir yerine ekleyebilirsiniz. Görünüm işlendiğinde, bölüm HTML sayfasının en altında, kapanış </gövde> etiketinden hemen önce görüntülenir.

Bu sayfanın tüm betiği, açıklama tarafından belirtilen betik etiketinin içine gider:

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

İlk olarak bir görünüm modeli sınıfı tanımlayın:

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

ko.observableArray , Knockout'ta gözlemlenebilir olarak adlandırılan özel bir nesne türüdür. Knockout.js belgelerinden: Gözlemlenebilir, aboneleri değişiklikler hakkında bilgilendirebilen bir "JavaScript nesnesidir." Gözlemlenebilir bir değişikliğin içeriği otomatik olarak eşleşecek şekilde güncelleştirilir.

Diziyi products doldurmak için web API'sine bir AJAX isteği gönderin. API için temel URI'yi görünüm çantasında depoladığımız hatırlayın (öğreticinin 4. Bölümüne bakın).

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

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

Ardından görünüm modeline ürün oluşturmak, güncelleştirmek ve silmek için işlevler ekleyin. Bu işlevler web API'sine AJAX çağrıları gönderir ve sonuçları kullanarak görünüm modelini güncelleştirir.

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);
}

Şimdi en önemli bölüm: DOM dolu olduğunda ko.applyBindings işlevini çağırın ve öğesinin ProductsViewModelyeni bir örneğini geçirin:

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

ko.applyBindings yöntemi Knockout'u etkinleştirir ve görünüm modelini görünüme aktarır.

Artık bir görünüm modeline sahip olduğumuza göre bağlamaları oluşturabiliriz. Knockout.js,HTML öğelerine öznitelikler ekleyerek data-bind bunu yaparsınız. Örneğin, html listesini bir diziye bağlamak için bağlamayı foreach kullanın:

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

Bağlama dizide foreach yinelenir ve dizideki her nesne için alt öğeler oluşturur. Alt öğelerdeki bağlamalar, dizi nesnelerindeki özelliklere başvurabilir.

Aşağıdaki bağlamaları "update-products" listesine ekleyin:

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

<li> öğesi foreach bağlaması kapsamında gerçekleşir. Bu, Knockout öğesini dizideki products her ürün için bir kez işleyecek anlamına gelir. öğesindeki tüm bağlamalar <li> bu ürün örneğine başvurur. Örneğin, $data.Name üründeki Name özelliğine başvurur.

Metin girişlerinin değerlerini ayarlamak için bağlamasını value kullanın. Düğmeler, bağlama kullanılarak model görünümündeki işlevlere click bağlıdır. Ürün örneği her işleve parametre olarak geçirilir. Daha fazla bilgi için Knockout.js belgelerinde çeşitli bağlamaların iyi açıklamaları yer alır.

Ardından, Ürün Ekle formunda gönderme olayı için bir bağlama ekleyin:

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

Bu bağlama, görünüm modelinde işlevini çağırarak create yeni bir ürün oluşturur.

Yönetici görünümünün tam kodu aşağıdadır:

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

Uygulamayı çalıştırın, Yönetici hesabıyla oturum açın ve "Yönetici" bağlantısına tıklayın. Ürünlerin listesini görmeniz ve ürünleri oluşturabilmeniz, güncelleştirebilmeniz veya silebilmeniz gerekir.

ÖncekiSonraki