代码之家 › 专栏 › 技术社区 › Bob Tway

与knockout中foreach绑定上的optionsAfterRender等效

knockout-3.0 knockout.js javascript

Bob Tway · 技术社区 · 6 年前

在淘汰赛中 options “绑定有一个可选参数`optionsAfterRender,用于在插入单个选项标记时修改它们。你可以 find more details in the documentation .

对于我的一个选择列表,我必须使用 foreach 而是绑定,因为它需要使用 optgroup .

<select  data-bind="foreach: { data: availableData,
                              value: editDataId">
  <optgroup data-bind="attr: {label: groupTitle}, foreach: groups">
    <option data-bind="value: id, attr: {title: name }"></option>
  </optgroup>
</select>

但是,我也希望在绑定之后修改这些选项。

有一个 afterRender foreach公司 ,但它的行为似乎与 optionsAfterRender

<select  data-bind="foreach: { data: availableData,
                              value: editDataId,
                              afterRender: doStuff">
  <optgroup data-bind="attr: {label: groupTitle}, foreach: groups">
    <option data-bind="value: id, attr: {title: name }"></option>
  </optgroup>
</select>

doStuff(elements, data): void {
    for (let entry of elements[1].querySelectorAll("option")) {
        ko.applyBindingsToNode(entry, {disable: true }, entry);
    }
}

(我真的不想全部禁用它们-这只是一个简单的测试)-但这会导致整个选择列表根本不呈现的奇怪结果。检查时,节点仍然在那里-在HTML中,它们可以被捕获和记录-但是它们没有出现在页面上。

选项AfterRender foreach公司 结合?

1 回复 | 直到 6 年前

Jason Spake 6 年前

除了修复未关闭的foreach绑定类型外,我还发现需要将选项的“title”绑定更改为“label”,以显示单个选项文本。除此之外,您的代码似乎按预期运行。

function viewModel(){
  var self = this;
  self.editDataId = 1;
  self.availableData = [
    { groupTitle: 'group1', groups: [ {id: 1, name: 'item1'}, {id: 2, name: 'item2'} ] } ,
    { groupTitle: 'group2', groups: [ {id: 3, name: 'item3'}, {id: 4, name: 'item4'} ] } 
  ];
	
  self.doStuff = function(elements, data) {
    for (let entry of elements[1].querySelectorAll("option")) {
      ko.applyBindingsToNode(entry, { disable: true }, entry);
    }
  }
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select  data-bind="foreach: { data: availableData,
                              value: editDataId,
                              afterRender: doStuff }">
  <optgroup data-bind="attr: {label: groupTitle}, foreach: groups">
    <option data-bind="value: id, attr: {label: name}"></option>
  </optgroup>
</select>