Knockout.js: Karmaşık nesneye

Question

Ben knockout.js yeniyim

bağlanma ve bir kullanıcıyı temsil eden aşağıdaki nesneyi bağlamak için çalışıyorum: Bir kullanıcı sıfır veya daha fazla konumun olabilir

{ 
    "$id": "1", 
    "$values": [ 
     { 
      "$id": "2", 
      "Locations": { 
       "$id": "3", 
       "$values": [] 
      }, 
      "Photos": { 
       "$id": "4", 
       "$values": [] 
      }, 
      "UserId": 1, 
      "Name": "Test User" 
     } 
    ] 
} 

ve sıfır veya daha fazla fotoğraf.

görünüşüdür modeli:

function UsersViewModel() { 
    var self = this; 
    self.users = ko.observableArray(); 

    var baseUri = 'http://localhost:46241/api/users'; 

    $.getJSON(baseUri, function (data) { 
     self.users = data; 
    }); 
} 

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

HTML içeren bağlayıcı aşağıdaki gibidir:

<ul id="update-users" data-bind="foreach: users"> 
    <li> 
      <div><div class="item">User ID</div> 
       <input type="text" data-bind="value: $data.UserId" /> 
      </div>     
      <div><div class="item">Name</div> 
       <input type="text" data-bind="value: $data.Name" /> 
      </div>     
    </li> 
</ul> 

dışarı düz yanlış bu durumu Am? Veya kullanıcının nesne ve referansları muhtemelen bağlamayı bozuyor mu?

Answer 1

mıyım dışarı düz yanlış yapıyor?

Evet. Sen, JSON callback'inde daki observableArray üzerine yazıyorsunuz böylece onu yok: senin durumunda, data.$values içermesi gibi görünüyor

$.getJSON(baseUri, function (data) { 
    self.users(data.$values); 
}); 

Not: Genel olarak

$.getJSON(baseUri, function (data) { 
    self.users = data; 
}); 

, nakavt gözlenebilirlerinin böyle atandığı gerçek dizi, data'un kendisi değil.

Bu

davanız için çalışacak, ama bu tam potansiyeline için nakavt kullanmıyor.

mapping plugin

tam olarak bu durum için oluşturuldu. Karmaşık bir nesneyi yinelemeli olarak değiştirir ve tüm özelliklerini gözlemlenebilir dizilere ve göze çarpan tüm dizileri gözlemlenebilir dizilere dönüştürür. Bu, nesnenin durumu üzerinde ince ayarlı kontrol sağlar ve her değişikliği izlemenizi sağlar.

$.getJSON(baseUri, function (data) { 
    ko.mapping.fromJS(data.$values, {}, self.users); 
}); 

Ayrıca kısmi güncellemeler sağlar: sunucudan kullanıcıların bir listesini alabilir ve görünüm model zaten bunların yarısı vardır varsayalım. Eşleme eklentisi, yalnızca görüntüleme modelinize eksik olanları ve mevcut olanlara uygun değişiklikleri yapabilecek kapasiteye sahiptir. Nasıl yapılacağını öğrenmek istiyorsanız, dokümanlardaki "Advanced usage" section'u okuyun. Eğer haritalama eklentisi sunucusundan kullanıcı nesneleri dizisini almak ve kullanmak varsayarsak

---

sonra senin şu şekilde görünecektir bağlayıcı: Genel bir not

<ul id="update-users" data-bind="foreach: users"> 
    <li> 
      <div><div class="item">User ID</div> 
       <input type="text" data-bind="value: UserId" /> 
      </div>     
      <div><div class="item">Name</div> 
       <input type="text" data-bind="value: Name" /> 
      </div> 
      <ul class="photos" data-bind="foreach: Photos.$values"> 
       <!-- ... --> 
      <ul> 
    </li> 
</ul> 

, @Greg Smith'in açıklama doğrudur . Nesne tuşlarında $'u kaybetmeye çalışın, bir noktada nakavt sırasında özel değişkenlerle çakışabilirler. Örneğin, bunları alt çizgilerle güvenli bir şekilde değiştirebilirsiniz.

[ 
    { 
     "Locations": [], 
     "Photos": [], 
     "UserId": 1, 
     "Name": "Test User" 
    } 
]