Pytanie Wiązanie attr z atrybutami typu "tylko do odczytu" i "wyłączone"


Jaka jest sugerowana metoda "najlepszej praktyki" Wiązanie danych "knockout" "attr" z autonomicznymi atrybutami, takimi jak "tylko czytać" i "niepełnosprawny"?

Te atrybuty są specjalny w tym sensie są one generalnie włączone poprzez ustawienie wartości atrybutu na nazwę atrybutu (chociaż wiele przeglądarek działa dobrze, jeśli po prostu umieścisz nazwy atrybutów bez żadnych wartości w kodzie HTML):

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

Jeśli jednak nie rób tego aby te atrybuty były stosowane, ogólną praktyką jest po prostu pominięcie ich w ogóle z HTML (w przeciwieństwie do robienia czegoś takiego jak readonly = "false"):

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

Wiązanie danych "knockout" na poziomie "attr" nie obsługuje tego scenariusza. Jak tylko podam nazwę atrybutu, muszę podać również wartość:

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

Czy istnieje sposób, w jaki przeglądarka działa w różnych przeglądarkach "wyłączone" lub "tylko do odczytu"? Czy jest jakiś trick z niestandardowe powiązanie którego mogę użyć, aby nie renderować byle co jeśli nie chcę, aby element został wyłączony lub udostępniony tylko do odczytu?


25
2018-01-04 21:24


pochodzenie


Nie rozumiem, dlaczego musisz zapewniać wyłączone, jeśli nie jesteś wyłączony, aby pokazywać? - jjperezaguinaga
Podany przeze mnie przykład ma na celu jedynie zademonstrowanie problemu. Problem polega na tym, że niektóre atrybuty w HTML są samodzielnymi atrybutami - tak naprawdę nie wymagają wartości. A jeśli nie chcesz, aby te atrybuty wpływały na HTML, po prostu je pomiń. Ale mechanizm wiązania danych "knockout" o nazwie "attr" nie obsługuje tego scenariusza. - Armchair Bronco


Odpowiedzi:


Wiązanie danych "attr" Knockout wspiera ten scenariusz po prostu wraca null lub undefined od twojego getDisabledState() funkcja wtedy nie wyemituje atrybutu.

Próbny Skrzypce.


36
2018-01-04 21:33



Jak mogę sprawdzić, czy atrybut nie został wysłany za pomocą narzędzia Firebug lub podobnego narzędzia? Kiedy próbuję wyświetlić "na żywo" HTML z powyższego demo Fiddle, nadal widzę kod wiążący dane, a nie live, renderowane znaczniki <INPUT>. (Przyznaję jednak, że nigdy nie przyszło mi do głowy, aby to zrobić, w funkcji getDisabledState () zawsze zwracałem "wyłączony" lub pusty ciąg ""). - Armchair Bronco
Jeśli moje skrzypce pracują z twoją przeglądarką, to działa. Nie używam Firebug. W narzędziach do Chrome Chrome jest jasne, że dodaje i usuwa atrybut, jeśli wrócisz "disabled" i undefined. - nemesv
OK. Zweryfikowałem to w Chrome. Dzięki za szybką odpowiedź i demo Fiddle. To proste i eleganckie rozwiązanie, które nigdy nie przyszło mi do głowy. Zazwyczaj inicjuję moje wartości zwracane do oczekiwanego typu danych (dla "wyłączonych" lub "tylko do odczytu" jest ciąg znaków). Po prostu zainicjuję "niezdefiniowane" i powinienem być dobry. Dzięki! - Armchair Bronco
Jeśli funkcja getDisabledState () zwróci true / false, można użyć operatora potrójnego w linii, bez modyfikowania funkcji: <input type = "text" data-bind = "attr: {'disabled': getDisabledState ()? 'Disabled': null} "/> Będę miał taki sam efekt jak zwracany ciąg lub null. - Jacob Jedryszek


Możesz również utworzyć powiązanie dla readonly w ten sposób:

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;
}
};

Źródło: https://github.com/knockout/knockout/issues/1100


9
2018-06-21 15:13



Dziękujemy za udostępnienie źródła i uwzględnienie kodu wbudowanego. - John Zabroski
Wspaniały post! Czy możesz również dołączyć wersję demonstracyjną, jak z niego korzystać? Jestem pewien, że mogłem to rozgryźć, ale nigdy wcześniej nie tworzyłem niestandardowego wiązania i byłoby to przydatne również dla innych. - jpaugh
@jpaugh, Przepraszam, nie używałem KO od kilku lat. W dzisiejszych czasach używam framework Aurelia. - Greg0


Knockout ma włączyć wiązanie, jak również wyłączyć wiążący.

Nie jestem pewien, czy były one dostępne, gdy zadano pytanie, ale każdy, kto powraca do tego problemu, powinien być świadomy.


7
2018-01-31 15:08



Pamiętaj, aby wybrać właściwy. !observableProperty nie działa. NIE ! nie jest odbierany przez oceniającego. - P.Brian.Mackey
! observableProperty () działa jednak :) znacznie szybciej i często czystsze niż niestandardowe powiązanie - mikus
@ P.Brian.Mackey To typowy błąd początkującego Knockout. Gdy dodajesz operatora takiego jak! przed obserwowalną właściwością, musisz jawnie wywołać ją, dodając () na końcu właściwości nazwa_właściwości. To mówi Knockout, aby podnieść całe wyrażenie do obliczeń syntetycznych. Jeśli korzystasz z Chrome Debugger i wpisujesz fałszywą obserwowalną właściwość, która nie istnieje, wygeneruje błąd z maszyną VM: SomeLineNumber w konsoli. Kliknij maszynę VM: SomeLineNumber, a zobaczysz wygenerowany Knockout. - John Zabroski