nakavt otomatik eşlenmiş gözlenebilir bir boş nesne oluşturmak

Question

Ko eşleme ile küçük bir sorunu çözmeye çalışıyorum. Senaryo benim ViewModel temelde bir nesne koleksiyonudur. nesnelerin her biri bu şekilde, bir json çağrısından oluşturulur: Bu mükemmel çalışıyor ve benim HTML büyü her tür yapabileceği

var ViewModel = ko.observableArray(); 

$.getJSON(url, function(data) { 
    ViewModel.push(ko.mapping.fromJSON(data)); 
}); 

. Soru şu ki, örneğin koleksiyonuma bir şey eklemek istiyorum, müşteri tarafı "Ekle ve Düzenle" senaryosunu destekleyelim. Ben böyle bir şey yapmak istiyorum:

<input type="button" value="add new" data-bind="click: AddNew" /> 

Ve bir şey gibi olmak ViewModel işlevi AddNew istiyorum: Temelde ben diğer özdeş olan bir nesneyi itmek gerekir

function AddNew() { 
    this.push(// WHAT HERE?); 
} 

Halihazırda var olan, ama tabii ki tüm boşlukları boşaltılarak ...

Listeden bir nesneyi "klonlamak" ve tüm gözlenebilirleri boş bırakmayı düşünüyordum ama nereden başlayacağımı bilmiyorum m afraid:/

Answer 1

İşlevselliğinizi istemci tarafı düzenleme/ekleme işlemine genişletecekseniz, nesnelerinizi bir js sınıfına resmileştirmenizi ve sonra bu nesneleri dahili olarak eşleştirmenizi öneririz. Bu, ana görünüm modelinizde ekleme yöntemlerinizi kullanmanıza ve istemci tarafındaki boş örnekleri kolayca oluşturmanıza olanak tanır.

Eşleme eklentisiyle ilgili bir uyarı, nesneleri güncellemek için bu nesnelerin eklenti tarafından orijinal olarak eşlenmiş olmasını bekler. İşte nasıl yapılabileceğinin hızlı bir örneği.

var YourObjectClass = function (config) { 
    var self = this, data; 

    // your default structure goes here 
    data = $.extend({ 
     name: "", 
     id : -1 
    }, config); 

    ko.mapping.fromJS(data, {}, self); 
}; 

var viewModel = function(initialData) { 
    var self = this; 

    ko.mapping.fromJS(initialData, { 
     items: { 
      create : function (options) { 
       return new YourObjectClass(options.data); 
      } 
     } 
    }, self); 

    this.AddNew = function() { 
     self.items.push(new YourObjectClass()); 
    } 
}; 

Bu yardımcı olur umarım.

Answer 2

Alanları biliyor musunuz, yoksa sunucudan aldığınız şeyden kopyalanmasına mı ihtiyacınız var? Eğer durum böyle olsaydı yeni bir listeye başlamakta zorlanırdınız. Sadece bir şablon oluşturmak ve çıkartabileceğimize:

Ben görünümü modeli bir gözlemlenebilir veya gözlemlenebilir diziyi olmak görmedim

var myTemplate = { 
    name: ko.observable(), 
    phone: ko.observable() 
}; 

ViewModel.push(myTemplate); // add empty item 

, neden böyle oluşturun?

function ViewModel() { 
    self = this; 
    self.items = ko.observableArray(); 
} 

var myViewModel = new ViewModel(); 
ko.applyBindings(myViewModel); 

$.getJSON(url, function(data) { 
    myViewModel.items.push(ko.mapping.fromJSON(data)); 
});