Soru Nakavt attr 'readonly' ve 'disabled' gibi özelliklerle bağlama


Önerilen "en iyi uygulama" yolu nedir? Knockout'un "attr" veri bağlaması gibi bağımsız özellikler ile "Sadece oku" ve "Engelli"?

Bu özellikler özel Bu özellik genellikle, özellik değerini özellik adına ayarlayarak etkinleştirilir (HTML'de hiçbir değer içermeyen özellik adlarını basitçe dahil ederseniz birçok tarayıcı düzgün çalışır):

<input type="text" readonly="readonly" disabled="disabled" value="foo" />

Ancak, eğer yapamaz Bu özelliklerin uygulanmasını istiyorsanız, genel uygulama onları tamamen HTML'den çıkarmaktır (readonly = "false" gibi bir şey yapmanın aksine):

<input type="text" value="foo" />

Knockout'un "attr" veri bağlaması bu senaryoyu desteklemiyor. Bir özellik adı sağladığım anda, bir de değer vermem gerekiyor:

<input type="text" data-bind="attr: { 'disabled': getDisabledState() }" />

'Devre dışı' veya 'salt okunur' bir çapraz tarayıcı yolu var mı? Ya da bir hile var mı özel ciltleme işlemek için kullanabileceğim her şey Öğeyi devre dışı bırakmak istemediysem veya salt okunur mu?


25
2018-01-04 21:24


Menşei


Anlayamıyorum, hatta göstermek için devre dışı bırakılmasanız neden devre dışı bırakmanız gerekiyor? - jjperezaguinaga
Verdiğim örnek, sadece sorunu göstermek için tasarlandı. Sorun şu: HTML'deki bazı özellikler bağımsız özelliklerdir - gerçekten bir değer gerektirmezler. Ve eğer bu özelliklerin HTML'yi etkilemesini istemiyorsanız, bunları basitçe atlarsınız. Ancak Knockout'un "attr" veri bağlama mekanizması bu senaryoyu desteklemiyor. - Armchair Bronco


Cevaplar:


Knockout'un "attr" veri bağlaması bu senaryoyu destekliyor. null veya undefined senden getDisabledState() o zaman işlev özniteliği yaymaz.

gösteri Keman.


36
2018-01-04 21:33



Firebug veya benzer bir araç kullanarak özniteliğin yayınlanmadığını nasıl doğrulayabilirim? Yukarıdaki "Fiddle" bloğundan "canlı" HTML'yi görüntülemeye çalıştığımda, hala canlı olan <INPUT> etiketli Knockout veri bağlama kodunu görüyorum. (Ancak, bunu yapmak için bana hiç bir zaman gelmediğini kabul edeceğim; getDisabledState () işlevimde, her zaman "devre dışı" veya boş dizgeyi "") döndürdüm. - Armchair Bronco
Eğer keman tarayıcınızla çalışıyorsa o zaman çalışıyor. Firebug'ı kullanmıyorum. Chrome dev araçlarında, dönerseniz özelliği ekler ve kaldırır. "disabled" ve undefined. - nemesv
TAMAM. Bunu Chrome'u kullanarak doğruladım. Hızlı yanıt ve demo Fiddle için teşekkürler. Bana hiç yaşanmamış basit ve zarif bir çözüm. Normalde dönüş değerlerimi beklenen veri türüne ("devre dışı" veya "salt okunur" için bir dizedir) başlatıyorum. Ben sadece 'undefined' için başlayacağım ve gitmek için iyi olmalıyım. Teşekkürler! - Armchair Bronco
DisabledState () işlevinin true / false değerini döndürürseniz, işlevinizi değiştirmeden üçlü operatörü satır içi kullanabilirsiniz: <input type = "text" data-bind = "attr: {'disabled': getDisabledState ()? 'Disabled': null} "/> Geri dönen dize veya null ile aynı etkiye sahip olacağım. - Jacob Jedryszek


Ayrıca böyle bir okuma için de bir bağ oluşturabilirsiniz:

ko.bindingHandlers['readonly'] = {
'update': function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (!value && element.readOnly)
        element.readOnly = false;
    else if (value && !element.readOnly)
        element.readOnly = true;
}
};

Kaynak: https://github.com/knockout/knockout/issues/1100


9
2018-06-21 15:13



Kaynağı paylaştığınız ve kod satır içi dahil ettiğiniz için teşekkür ederiz. - John Zabroski
Harika mesaj! Bunu nasıl kullanacağınızı gösteren bir demo da ekleyebilir misiniz? Bunu anlayabildiğime eminim, ama daha önce hiç özel bir bağ kurmamıştım ve başkalarına da faydalı olurdu. - jpaugh
@jpaugh, Üzgünüm, birkaç yıldır KO kullanmadım. Bu günlerde Aurelia çerçevesini kullanıyorum. - Greg0


Nakavt bir etkinleştirme yanı sıra bağlanma devre dışı bağlayıcı.

Soruyu sorduğunda bunların kullanılabilir olup olmadığından emin değilim, ancak bu konuya geri dönen herkesin farkında olması gerekir.


7
2018-01-31 15:08



Doğru olanı seçtiğinizden emin olun. !observableProperty çalışmıyor. DEĞİL ! değerlendirici tarafından alınmaz. - P.Brian.Mackey
! observableProperty () olsa da :) çok daha hızlı ve genellikle özel bir bağlayıcı daha temiz çalışır - mikus
@ P.Brian.Mackey Bu ortak bir Nakavt acemi hatasıdır. Bir operatör eklediğinizde! observableProperty öğesinin önünde, propertyName öğesinin sonunda () ifadesini ekleyerek açıkça çağırmanız gerekir. Bu, Knockout'a bütün ifadeyi sentetik bir hesaplama ile kaldırmasını söyler. Chrome Hata Ayıklayıcısı'nı kullanır ve mevcut olmayan sahte bir gözlemlenebilirProperty yazarsanız, Konsolda bir VM: SomeLineNumber ile bir hata oluşturur. VM: SomeLineNumber öğesine tıklayın ve Knockout'un oluşturulduğunu göreceksiniz. - John Zabroski