Merhaba, bugün değişik bir şey paylaşıp knockoutjs kütüphanesine bir giriş yapmak istiyorum. ASP.NET MVC ile JSON verisini, JQuery Ajax ile çekip veriyi sayfamızda göstereceğiz.

Örneğimi containerless diye tabir edilen ile elemanı sabit bir ‘<ul>’ elementi üzerinden giderek göstermek istiyorum. Karar ve döngü ifadeleri html comment satırlarını kullanacağız.

Öncelikle JavaScript ile bir ViewModel Oluşturalım :

var viewModel = function(data) {
  this.postList = ko.mapping.fromJS(data);
  this.isEmpty = ko.observable(data.posts.length == 0 ? true : false); // Gelen veri boş mu dolu mu kontrol ediyoruz
};

Ajax ile verimizi çekiyoruz

$(document).ready(function() {
  $.ajax({
    url: '/JSON/RecentPosts',
    type: 'GET',
    success: function(result) {
      var vm = new viewModel(result);
      ko.mapping.fromJS(vm.postList);
      ko.applyBindings(vm); //Gerekli bağlamaları yaptık
    }
  });
});

Aşağıdaki html MVVM modelinin view kısmını temsil etmektedir.

<ul>
  <li>Son Gönderiler <span><a href="/Posts/">Hepsini Gör</a></span></li>
</ul>
<!-- ko if: isEmpty -->
<ul>
  <li>Kayıtlı Gönderi Bulunamadı <a class="link" href="/Posts/Create/">Add your first recipient</a></li>
</ul>
<!-- /ko -->
<!-- ko else -->
<!-- ko foreach: postList.posts -->
<ul>
  <li>
<p data-bind="text: PostTitle"></p>
<span><a class="link" data-bind="attr: { href: '/Posts/View/' + PostID() }">Read More</a></span></li>
</ul>
<!-- /ko -->
<!-- /ko -->

Örnek veri ile deneme yapabileceğiniz modifiye edilmiş basit bir örneği JSFiddle üzerinde verdim. Buyrun linki : http://jsfiddle.net/rgdJm/

Örnek JSON:

{"posts":[{"PostID":1,"PostTitle":"Merhaba"},{"PostID":2,"PostTitle":"Hello"},{"PostID":3,"PostTitle":"Hej"}]}