javascript - 从 Knockout.js 选项数组中删除后重新初始化 Materialize.css 选择框

Question

我有一个选择框，其中的选项和选择是通过 Knockout.js 处理的。我想使用 Materialize CSS 设计它的样式。

此功能可正常用于选择框的初始显示，并且当将选项添加到optigon.js'options'observablearray时，通过使用“options fafterrender”绑定(bind)在添加每个选项后的(re re ret)初始化(浪费，浪费，但有效)。

删除选项时，Knockout.js 不提供类似于“optionsAfterRender”的任何内容，因此没有明显的方法来触发 Materialize CSS 魔法的重新初始化。

问题:您是否可以看到任何非疯狂的选项？

代码:

<select data-bind="

      options: options,
      optionsText: function(item) { return optionsText[item] },
      value: displayedValue,

      optionsAfterRender: function (option, item) {
         setTimeout(function() {
            $(option.parentElement).material_select();
         }, 0);
      }
     ">
</select>

('setTimeout' 是必需的，否则不会选择所选的选项。)

Answer 1

A custom binding handler更适合将自定义 UI 组件(如 material_select)与 KnockoutJS 集成。下面是构建此类处理程序的一种方法:

ko.bindingHandlers["materializeSelect"] = {
  after: ['options'],
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // Initial initialization:
    $(element).material_select();
    
    // Find the "options" sub-binding:
    var boundValue = valueAccessor();
    
    // Register a callback for when "options" changes:
    boundValue.options.subscribe(function() {
      $(element).material_select();
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    
  }
};

function RootViewModel() {
  var self = this, i = 2;
  self.options = ko.observableArray([{id: 1, txt: "Option A"}, {id: 2, txt: "Option two"}]);
  self.selectedOption = ko.observable(null);
  
  // For testing purposes:
  self.addOption = function() { self.options.push({id: ++i, txt: "Dynamic option " + i}); };
}

ko.applyBindings(new RootViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/css/materialize.min.css" rel="stylesheet"/>

<select data-bind="materializeSelect: { options: options },
                   options: options,
                   optionsText: 'txt',
                   value: selectedOption">
</select>

<button data-bind="click: addOption">Add option dynamically</button>

老实说，我觉得这是一个问题/遗漏，甚至可能是 MaterializeCSS 中的一个错误，它显然没有注意到 select 选项的变化。 IIRC 库(例如 Select2 和 Chosen) 具有此功能。

无论如何，如果 MaterializeCSS 会正确地注意到动态添加的选项，我仍然建议使用自定义绑定(bind)处理程序，只是一个更简单的处理程序:

ko.bindingHandlers["materializeSelect"] = {
  after: ['options'],
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $(element).material_select();
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // Handle ViewModel changes of which MaterializeCSS needs custom
    // notification here.
  }
};