如何将剔除复选框绑定到材料设计精简版? [英] How to bind knockout checkbox to a material design lite?

问题描述

我在用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> 

解决方案

这里的问题是，材料设计会在页面加载时运行一个函数，以将事件处理程序和功能绑定到某些DOM元素(如您的情况下的复选框). /p>

因为敲除本质上需要运行(或当依赖关系更改时重绘)绑定功能的元素.在您的情况下，foreach可以/将仅在敲除已初始化后才能运行，这通常是在DOM准备就绪时执行的.因此，Material最初在运行其绑定时将无权访问该元素.

您需要具有Custom Binding以便在元素准备就绪时运行逻辑"材料.这个过程非常简单.

伪代码:

1. 创建一个自定义绑定，命名为任何您想要的.
2. 在自定义绑定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);
        }
    }
};

I am having problems in bind a Knockout array with Material Design Lite checkbox. Basically it doesn't show the checkbox checked.

How can that be fixed?

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>

解决方案

The problem here is that material design runs a function on page load to bind event handlers and functionality to certain DOM elements (like the checkbox in your case).

Because knockout essentially needs to run (or will redraw when dependencies change) the elements you bind functionality to. In your case, the foreach can/will only run after knockout has been intialized, which is typically done on DOM ready. Hence, Material won't have had access to that element when it runs it's bindings initially.

You need to have a Custom Binding to run the Material "logic" on the readiness of the element. The process is dead simple.

Pseudo-code:

1. Create a custom binding called whatever you'd like.
2. In the custom binding init method, pass the element knockout gives you into the Material function that will attach the required event handlers.

Hopefully that helps you!

EDIT: From the Material Design lite webpage

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

Knowing this, in your Custom Binding you need to pass the element knockout gives you, to the aforementioned handler, like: componentHandler.upgradeElement(element)

EDIT EDIT: The code

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

这篇关于如何将剔除复选框绑定到材料设计精简版?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！