ノックアウトチェックボックスをマテリアルデザインライトにバインドするにはどうすればいいですか？

Question

Material Design Liteチェックボックスでノックアウト配列をバインドする際に問題があります。基本的にチェックボックスはチェックされていません。

どのように修正できますか？

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>

Answer 1

ここでの問題は、材料設計は（あなたの場合は、チェックボックスのような）特定のDOM要素にイベントハンドラと機能性をバインドするために、ページの読み込みの機能を実行することです。

ノックアウトは基本的に機能をバインドする要素を実行する必要があります（または依存関係が変更されたときに再描画されるため）。あなたのケースでは、foreachは、ノックアウトが初期化された後にしか実行できません。これは通常、DOM対応で行われます。したがって、マテリアルは最初にバインディングを実行するときにその要素にアクセスできませんでした。

エレメントの準備にマテリアル "ロジック"を実行するには、Custom Bindingが必要です。このプロセスは簡単ではありません。

擬似コード：

1. あなたが好きなものは何でも呼ばれるカスタムバインディングを作成します。
2. カスタムバインディングinitメソッドでは、elementノックアウトを渡すと、必要なイベントハンドラを添付するマテリアル機能が表示されます。

うまくいけば助けてください！

EDIT：Webページliteの材料設計から

材料設計Liteは自動的に登録して、ページのロード時にMDLクラスでマークされたすべての の要素をレンダリングします。ただし、DOM要素を動的に作成する の場合は、upgradeElement関数を使用して 新しい要素を登録する必要があります。 componentHandler.upgradeElement(element)

編集編集：コード

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

これを知っ

、カスタムであなたがelementノックアウトを渡す必要がバインディングは次のように、前述のハンドラに、あなたを与えます