SORU
27 Aralık 2011, Salı


Nasıl nakavt'/$root içinde bir pseudovariables $üst s edebilirim .() bilgisayarlı gözlemlenebilir?

knockout.js bağlayıcı bir ifade içinde, $data, $parent, and $root pseudovariables kullanabilirim. Nasıl ko.computed observable JavaScript ilan kullanıyorum o pseudovariables eşdeğer alabilir miyim?

Çocuk koleksiyonu ile üst viewmodel var, ve üst viewmodel selectedChild gözlemlenebilir. Göz önüne alındığında, veri bağlama ifadeleri hangisi alt seçili bir CSS sınıfı eklemek için kullanabilirsiniz:

<ul data-bind="foreach: children">
    <li data-bind="text: name,
                   css: {selected: $data === $root.selectedChild()},
                   click: $root.selectChild"></li>
</ul>
<script>
vm = {
    selectedChild: ko.observable(),
    children: [{name: 'Bob'}, {name: 'Ned'}],
    selectChild: function(child) { vm.selectedChild(child); }
};
ko.applyBindings(vm);
</script>

Ama benim viewmodels daha karmaşık olacak, ve istiyorum "seçilmiş" yapabilmek için sadece tek bir öğe için tek bir CSS sınıfı eklemek istiyorum. Gerçekten çocuk isSelected hesaplanan bir özellik viewmodel yapmak istiyorum, sonra buna bağlı olan diğer hesaplanan özellikler ekleyebilirim.

Denedim sadece yazı JavaScript başvuran $data $root, ihtimal bu nakavt olabilir tanımla değişkenleri ve bir şekilde onları kapsam ne zaman çağırır benim computed değerlendiricisi fonksiyonu

{
  name: 'Bob',
  isSelected: ko.computed(function(){ return $data === $root.selectedChild(); })
}

Ama böyle bir şans: benim değerlendiricisi içinde function, $data $root undefined.

Ayrıca $data $root erişim vermez beri benim değerlendiricisi içinde ko.contextFor kullanarak denedim. Ne yazık ki, benim değerlendiricisi içinde işlevi, contextFor Her zaman undefined döndürür. (Eğer onun arkasından gitmek gibi bu olsaydı bağımlılıkları takip edebilir nasıl net değil bu strateji için büyük umutlarım her neyse ... ben sabredemedim.)

Her zaman el ile üst viewmodel başvuran her çocuk viewmodel üzerinde bir özellik olarak kabul ettiler. Ama nakavt benim için bunu yapmak için yeteneğine sahip olduğunu biliyorum, ve benim kendi yazma gitmeden önce mekanizmalarını kullanıp kullanamayacağımı en azından araştırmak istiyorum.

Hesaplanan gözlemlenebilir, 32**: - yukarıda bağlayıcı ifade çevirmek mümkün olacak gibi görünüyor

Diğer düzgün hile bildirim bağlantıları sadece hesaplanan observables olarak uygulanır.

Ama nasıl kendi hesaplanan benim gözlemlenebilir yazıyorum ne zaman $data $root pseudovariables ile ilgili ne yapmam lazım?

CEVAP
27 Aralık 2011, Salı


Bu pseudovariables sadece veri bağlama bağlamında kullanılabilir. Görünüm modeli kendisi ideal ya da görüntüleme görünümü üzerinde herhangi bir bağımlılık olmamalıdır.

Görünüm modelinde hesaplanan observables eklerken, tahmin edersiniz nasıl hiçbir bilgiye sahip (olacak ne gibi $root). Görünümü model veya bir kısmını bir görünüm modeli bile bağlı ayrı birden fazla alanlarda sayfasında, farklı düzeyleri, böylece sözde değişkenleri olurdu farklı bağlı olarak element vardır başlangıç.

Duruma göre değişir ne çalışıyorsun gerçekleştirmek, ama isterseniz çocuğunuz için bir isSelected bilgisayarlı gözlemlenebilir olup olmadığını gösteren bu madde aynı şekilde Seçili öğeyi üst görünüm modeli, o zaman sen-ecek bulmak için bir yol üst mevcut çocuk.

Bir seçenek, çocuğunuzun yapıcı işlev üst geçmektir. Hatta çocuğun bir özellik olarak üst işaretçi eklemek zorunda değilsiniz ve sadece hesaplanan senin gözlemlenebilir içinde doğrudan kullanabilirsiniz.

Gibi bir şey

var Item = function(name, parent) {
   this.name = ko.observable(name);  
   this.isSelected = ko.computed(function() {
       return this === parent.selectedItem();        
   }, this);
};

var ViewModel = function() {
   this.selectedItem = ko.observable();
   this.items = ko.observableArray([
       new Item("one", this),
       new Item("two", this),
       new Item("three", this)
       ]);
};

Örnek: http://jsfiddle.net/rniemeyer/BuH7N/

Eğer tek düşündüğün seçilen durum, çocuk oluşturucu gibi selectedItem gözlemlenebilir başvurusu geçirmek için çimdik olabilir: http://jsfiddle.net/rniemeyer/R5MtC/

Ana görünüm modelinizi global bir değişken içinde saklanır, çocuk geçirmeden ve doğrudan gibi kullanarak düşünebiliriz sonra: http://jsfiddle.net/rniemeyer/3drUL/. Çocuk için başvuru olsa geçmesini tercih ederim.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Learn word 2013 tutorials

    Learn word 2

    5 AĞUSTOS 2014
  • Metheud

    Metheud

    9 EYLÜL 2006
  • Semantic Mastery

    Semantic Mas

    30 EKİM 2013