Question

我在使用Material Design Lite复选框绑定Knockout数组时遇到问题。基本上它没有显示复选框。

如何修复？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这里的问题是，材质设计在页面加载上运行一个函数，将事件处理程序和功能绑定到某些DOM元素（如您的情况下的复选框）。

因为knockout基本上需要运行（或者当依赖项改变时会重绘）你绑定功能的元素。在你的情况下，foreach可以/只会在已经初始化淘汰后运行，这通常在DOM就绪时完成。因此，在最初运行它时，Material不会访问该元素。

您需要Custom Binding来运行Material＆＃34;逻辑＆＃34;关于元素的准备情况。这个过程很简单。

的伪代码：

创建一个名为“你喜欢的”的自定义绑定。
在自定义绑定init方法中，传递element敲除会让您进入将附加所需事件处理程序的Material函数。

希望对你有帮助！

编辑：来自Material Design精简版网页

Material Design Lite将自动注册并呈现所有内容   页面加载时标记为MDL类的元素。但在这种情况下   在哪里动态创建DOM元素，需要注册   使用upgradeElement函数的新元素。

知道这一点，在你的自定义绑定中你需要通过element淘汰赛给你，前面提到的处理程序，如：componentHandler.upgradeElement(element)

编辑编辑：代码

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

如何将knockout复选框绑定到材质设计精简版？

1 个答案: