如何将淘汰赛复选框绑定到材料设计精简版？

Question

我在将 Knockout 数组与 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 就绪时完成。因此，Material 在最初运行它的绑定时将无法访问该元素。

您需要有一个Custom Binding 才能在元素准备就绪时运行材质“逻辑”。这个过程非常简单。

伪代码：

1. 根据需要创建自定义绑定。
2. 在自定义绑定init 方法中，通过element 敲除让您进入将附加所需事件处理程序的Material 函数。

希望对你有所帮助！

编辑：来自 Material Design lite 网页

Material Design Lite 将自动注册并渲染所有 页面加载时用 MDL 类标记的元素。然而在这种情况下 动态创建 DOM 元素的地方需要注册 使用 upgradeElement 函数的新元素。

知道了这一点，在您的自定义绑定中，您需要将 element 淘汰赛传递给上述处理程序，例如：componentHandler.upgradeElement(element)

编辑编辑：代码

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