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

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

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

删除选项时,Knockout.js不提供类似'optionsAfterRender'的任何内容,因此没有明显的方法可以触发Materialize CSS魔法的重新初始化.

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

码:

('setTimeout'是必要的,否则不会选择所选的选项.)

甲自定义绑定处理程序是更适合于集成的自定义用户界面组件等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());

Add option dynamically