Jak powiązać pole wyboru "nokaut" z materiałowym wzornictwem? - knockout.js, material-design, material-design-lite

Mam problemy z powiązaniem tablicy Knockout z polem wyboru Material Design Lite. Zasadniczo nie pokazuje zaznaczonego pola wyboru.

Jak można to naprawić?

var ViewModel = function() {
this.uniqueTabsNames = ko.observableArray(["one", "two", "three"]);
}

ko.applyBindings(new ViewModel());

<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<main class="mdl-layout__content">
<div class="page-content">

<p><b>generated via KO, it doesn"t work</b></p>

<!-- ko foreach: uniqueTabsNames -->
<div class="nav-checkbox-item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" data-bind="attr: {"for": $data}">
<input data-bind="attr: {"id": $data}" type="checkbox"  class="mdl-checkbox__input"/>
<span class="mdl-checkbox__label" data-bind="text: $data"></span>
</label>
</div>
<!-- /ko -->

<p><b>non KO checkbox</b></p>

<div class="nav-checkbox-item">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="testbox">
<input id="testbox" type="checkbox" class="mdl-checkbox__input" />
<span class="mdl-checkbox__label">test box</span>
</label>
</div>

</div>
</main>
</div>

Odpowiedzi:

Problem polega na tym, że projektowanie materiałów uruchamia funkcję przy ładowaniu strony, aby powiązać procedury obsługi zdarzeń i funkcje z niektórymi elementami DOM (np. Pole wyboru w twoim przypadku).

Ponieważ nokaut zasadniczo wymaga uruchomienia (lub przerysowania w przypadku zmiany zależności) elementów, z którymi wiąże się funkcjonalność. W twoim przypadku foreach może / będzie działać tylko po zainicjowaniu nokautu, co zwykle odbywa się w DOM gotowym. W związku z tym Materiał nie miał dostępu do tego elementu, gdy początkowo uruchamia jego wiązania.

Musisz mieć Custom Binding uruchomić „logikę” materiału dotyczącą gotowości elementu. Proces jest bardzo prosty.

Pseudo kod:

1. Utwórz niestandardowe powiązanie o nazwie cokolwiek chcesz.
2. W niestandardowym wiązaniu init metoda, przekazać element nokaut daje dostęp do funkcji Materiał, która dołącza wymagane moduły obsługi zdarzeń.

Mam nadzieję, że to ci pomoże!

EDYCJA: ze strony lite Material Design

Material Design Lite zostanie automatycznie zarejestrowanyi renderuj wszystko elementy oznaczone klasami MDL po wczytaniu strony. Jednak w tym przypadku gdzie dynamicznie tworzysz elementy DOM, musisz się zarejestrować nowe elementy za pomocą funkcji upgradeElement.

Wiedząc o tym, w niestandardowym wiązaniu musisz zdać element nokaut daje wspomnianemu przewodnikowi: componentHandler.upgradeElement(element)

EDYCJA EDYCJA: Kod

ko.bindingHandlers.SomeBinding = {
init: function(element) {
if(!(typeof(componentHandler) == "undefined")){
componentHandler.upgradeElement(element);
}
}
};