Knockout JS gözlemlenebilirlerini UI Bileşenleri arasında paylaşma

UI bileşenleri özelliklerini nasıl kullanacağımı imports: {}veexports: {} paylaşacağımı anlıyorum , örneğin:

defaults: {
    exports: {
        shouldShowMessage: '${$.component}'
    }
}

Dışa aktarma işleminde bileşen adını döndürür.

Ama bir nakavt gözlenebilir ihraç etmeye çalıştığınızda her zaman tanımsızdır:

defaults: {
    exports: {
        shouldShowMessage: '${$.shouldShowMessage}'
    }
}

...

setupKoBindings: function() {
    this.shouldShowMessage = ko.observable('Testing');
}

Geçici bir çözüm olarak burada açıklandığı gibi bir depolama modeli oluşturacağım ama ithalat ve ihracatı kullanmayı tercih ederim.

— Ben Crook
kaynak

Dışa aktarma nesnesinin değerleri, örneğin, ":" ile ayrılmış bir UiComponent örneğinin adı ve özelliğine çözümlenmelidir checkout.cart.total:title.
Dışa aktarma hedef adının UI bileşeni "ad alanı" içermesi gerekir.

Örneğinizde, değeri, dışa aktarım kaynağı olan UiComponent özelliğine çözümlenen bir dizeye ayarlarsınız. Dışa aktarma, geçerli bir dışa aktarma hedefi olmadığından incelediğinizde tanımsız.

İşte bir örnek:

defaults: {
    exportTarget: "foo.bar",
    exportTargetProperty: "showMessage",

    tracks: {
        shouldShowMessage: true
    },

    exports: {
        shouldShowMessage: '${$.exportTarget}:${$.exportTargetProperty}'
    }
}
...

Yukarıdaki değer, shouldShowMessageözellik değerini her değer değiştiğinde showMessagetam adı olan bir UiComponent özelliğine kopyalar foo.bar.
Bunun hedef özelliği otomatik olarak bir KO'yu gözlemlenebilir hale getirmeyeceğini unutmayın. Değer değişiklikleri, KO'nun bu özelliğe erişen DOM düğümlerini yeniden göndermek için tetiklemesi gerekiyorsa, bunun açıkça bildirilmesi gerekir.

Bu arada, ekleme shouldShowMessageiçin tracksnesnenin bir ko-ES5 gözlemlenebilir automagicallylar yapacaktır. Değişmez ko.observable()işler kullanmak da.

Yukarıdaki örnekte, exportTargetve exportTargetPropertyöğesinde yapılandırılmıştır defaults. Bunlar, genellikle daha anlamlı olan JSON'daki UiComponent seçeneklerinin bir parçası olarak da belirtilebilir, çünkü UiComponent adlarını içeren UiComponent hiyerarşisi burada tanımlanır.

Son olarak, değeri diğer UI bileşenine iletmek için bir değer nesnesi kullanan çözümünüzün ihracat veya ithalat kullanmaktan daha iyi olduğunu düşünüyorum. Deneyimlerime göre, DOM'da veya UiComponents'de ortak durumu korumak, en basit durumlar dışında spagetti OOP için bir reçetedir.

— Vinai
kaynak

Mükemmel açıklama, teşekkürler @Vinai! Zamanım olduğunda bir deneyeceğim ve işe yarıyorsa bunu kabul edilmiş olarak işaretleyeceğim.

— Ben Crook

Kullanırken bazı sorunlarla karşılaştım tracks, manuel olarak gözlemlenebilirler abone artık this.shouldShowMessage.subscribe is not a functionkullanıldığında this.shouldShowMessage.subscribe(function() { ... }); çalışmıyor Gözlenebilir başka bir şekilde ayarlarken iyi çalışıyor. Sanki bir adımı kaçırmışım gibi ya tracksda aynı şekilde gözlemlenebilir bir şey yaratmıyormuşum gibi geliyor.

— Ben Crook

Haklısın, özellikler artık normal gözlenebilir değil, sadece ES5 alıcı / ayarlayıcı çiftleri. Orijinal gözlemlenebilir işleve erişmek istiyorsanız, ko enjekte edebilir ve kullanabilirsiniz ko.getObservable(this, 'shouldShowMessage').subscribe(function(newValue) { ...});(ilk argüman viewmodel ( this), ikincisi izlenen özelliğin adıdır. Daha fazla bilgi için: github.com/SteveSanderson/knockout-es5

— Vinai

Ahh mantıklı, sen en iyisin <3

— Ben Crook

İthalat ve ihracat ile oynadıktan ve hala başarısız olduktan sonra bu spagetti kodu kabul ediyorum, vazgeçtim ve manuel abonelikler ve bir depolama modeli ile devam edeceğim.

— Ben Crook