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

与knockout中foreach绑定上的optionsAfterRender等效

  •  0
  • 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 年前
        1
  •  1
  •   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>