KnockoutJS 自定义数据绑定以添加移动样式

Question

在昨天的大量帮助下，我采用了演示车示例，并将其应用于我的应用程序（搜索 B&B 房间）。

这个想法是，您从 (1) 房间类型中选择 - 然后填充 (2) 居住者 - 当您从 (2) 居住者中选择时，它会填充 (3) Number Reqd

问题是一旦选择了居住人数，我就无法将移动样式添加到新添加的下拉列表中：

这里有一个工作小提琴：http://jsfiddle.net/mtait/g8cQz/5/

在@Dan 的帮助下，他通过添加jqmOptions: sampleProductCategories 将样式应用于Occupants 下拉列表：

     <td>
        <select data-bind='jqmOptions: sampleProductCategories, options: $root.RoomCategories, optionsText: "TypeName", optionsCaption: "Select...", value: category'></select>
     </td>

     <td data-bind="with: category">
          <select data-bind='jqmOptions: sampleProductCategories, options: Occs, optionsText: "occdesc2", optionsCaption: "Select...", value: $parent.occupancy'></select> 
     </td>

      <td class='quantity' data-bind="with: category">
          <select data-bind="visible: $parent.occupancy, options: ko.utils.range(0, TypeCount), value: $parent.quantity"></select>
      </td>

ko.bindingHandlers.jqmOptions = {
update: function (element, valueAccessor, allBindingsAccessor, context) {
    ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, context);
    $(element).selectmenu();
    $(element).selectmenu("refresh", true);
   }
  };

What do I need to add to get the Number Required dropdown list or Occupants dropdown list, to add styling to the number reqd, when Occupants is selected?

谢谢，

标记

Answer 1

将初始的 jQuery 移动选择移动到 init 方法，也使用 applyBindingsToNode 而不是手动调用选项绑定上的更新

ko.bindingHandlers.jqmOptions = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        ko.applyBindingsToNode(element, { options: valueAccessor() }, context);
        $(element).selectmenu();
    },    
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        $(element).selectmenu("refresh", true);
    }
};