从Knockout.js选项数组中删除后重新初始化Materialize.css选择框 [英] Re-init Materialize.css select box after removal from Knockout.js options array

问题描述

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

I have a select box where the options and selection are handled via Knockout.js. I want to style this using Materialize CSS.

这对于选择框的初始显示是正常的，并且当选项被添加到Knockout.js'选项'observableArray时在添加每个选项后使用'optionsAfterRender'绑定到（重新）初始化（浪费，但有效）。

This works OK for the initial display of the select box, and when options are added to the Knockout.js 'options' observableArray by using the 'optionsAfterRender' binding to (re)initialize after each option has been added (wasteful, but works).

删除选项时，Knockout.js不会提供类似'optionsAfterRender'的任何东西，所以没有明显的方法来触发Materialize CSS魔法的重新初始化。

When removing an option, Knockout.js does not provide anything similar to 'optionsAfterRender', so there is no obvious way to trigger a re-initialization of the Materialize CSS magic.

问题：是否存在任何非疯狂选项您可以看到哪些？

Question: Are there any non-insane options which you can see?

代码：

<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'是必要的，否则不会选择所选的选项。）

(The 'setTimeout' is necessary since otherwise the selected option is not picked.)

推荐答案

自定义绑定处理程序更适合将自定义UI组件（如 material_select ）与KnockoutJS集成。以下是构建此类处理程序的一种方法：

A custom binding handler is more appropriate for integrating a custom UI component like material_select with KnockoutJS. Here's one way to build such a handler:

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>

说实话，我觉得这是一个问题/遗漏，甚至可能是MaterialiseCSS中的一个错误，它显然没有' t notice 选择选项更改。像Select2和Chosen 做这样的IIRC库具有此功能。

To be honest, I feel it's an issue/omission or perhaps even a bug in MaterializeCSS that it apparently doesn't notice select options changing. IIRC libraries like Select2 and Chosen do have this feature.

在任何情况下，如果MaterialiseCSS 通知动态添加选项正确，我仍然使用自定义绑定处理程序stuggest，只是一个更简单的：

In any case, if MaterializeCSS would notice dynamically added options correctly, I'd still stuggest using a custom binding handler, only a much simpler one:

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.
  }
};

这篇关于从Knockout.js选项数组中删除后重新初始化Materialize.css选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！