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

tarafından Rick Anderson

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 durumumuzda ü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 bağlı verilerdir. Görünüm modeli güncelleştirmeleri görünüme otomatik olarak 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şimin diyagramı.

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

Admin.cshtml dosyasına aşağıdaki Razor bölümünü 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 oluşturulduğunda, bölüm HTML sayfasının en altında, kapanış </body> etiketinden hemen önce görüntülenir.

Bu sayfanın tüm betiği, açıklamada belirtilen script 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, "Abonelere değişiklikler hakkında bildirimde bulunabilen bir JavaScript nesnesidir." Gözlemlenebilirin içeriği değiştiğinde, görünüm buna uygun şekilde otomatik olarak güncellenir.

Diziyi products doldurmak için web API'sine bir AJAX isteği gönderin. API'nin temel URI'sini görünüm paketinde 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, ürünleri oluşturmak, güncelleştirmek ve silmek için görünüm modeline 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 tam olarak yüklendiğinde ko.applyBindings işlevini çağırın ve ProductsViewModel'in yeni 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 bağlar.

Artık bir görünüm modeline sahip olduğumuza göre bağlamaları oluşturabiliriz. Knockout.js'de, bunu HTML öğelerine öznitelikler ekleyerek data-bind 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.

"update-products" listesine aşağıdaki bağlamaları 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ğlamının kapsamı içinde yer alır. Bu, Knockout öğesini dizideki products her ürün için bir kez işleyecek anlamına gelir. Tüm bağlamalar <li> öğesindeki 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ğlamayı value kullanın. Düğmeler, click bağlaması kullanılarak model görünümündeki işlevlere bağlanmıştı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 modelindeki create işlevini çağırarak yeni bir ürün oluşturur.

Yönetici görünümü için kodun tamamı 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.

Önceki Sonraki

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-27

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

Knockout.js ile Dinamik kullanıcı arabirimi oluşturma

Geri Bildirim

Ek kaynaklar