如何通过敲除部分（重新）将绑定应用于后代？

Question

我创建了一个自定义的敲除绑定，将给定的 div 包装在扩展器中。我的自定义绑定将给定内容 div 移动到扩展器的内容容器 div。移动内容后，内容子节点的敲除绑定将不再起作用（例如内容中按钮的点击绑定div）。因此我必须重新应用敲除绑定。

这在大多数情况下都有效。但是，如果内容 div 包含例如 foreach 绑定的敲除，则重新应用绑定意味着某些内容被复制。

扩展器绑定的用法示例：

<div    
    data-bind="expander: { title: 'dataCollectionForms'}">
<div>
  <div class="expander-content">
    <button     
      data-bind="click: $root.addAction, text: 'Hinzufügen'"></button>
    <div
      data-bind="foreach: listOfButtons">
      <button       
        data-bind="click: $root.buttonClickAction"> 
      </button>
    </div>
  </div>
</div>
</div>

我移动内容的代码div:

function moveExpanderContentToContentContainer($contentContainer, expanderContent) {
  try {

    //Move the expander content to the content container
    //The content will not be cloned but moved. For more info see:
    //https://api.jquery.com/append/
    var $expanderContent = $(expanderContent);
    $contentContainer.append($expanderContent);
    $contentContainer.addClass('expander-content-container panel-body');
    $expanderContent.addClass('expander-content');

    ko.applyBindingsToDescendants(bindingContext, expanderContent); 

  } catch (appendException) {
    var errorMessage = 'Could not append expander-content to expander-content-container.';
    logger.logError(errorMessage, appendException, self, true);
  }

}

如果我删除行

ko.applyBindingsToDescendants(bindingContext, expanderContent);

我的三个按钮的点击动作不再起作用：

如果我保留该行，点击操作有效，但按钮重复：

=> 如何以修复的方式更新移动内容的绑定单击绑定并且不会复制我的按钮？

=> 如果这个移动的工作流程根本不起作用，那么创建将给定内容包装在可折叠扩展器中的自定义敲除绑定的更好方法是什么？

我可以找到一些相关文章，但没有解决我的具体问题：

http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html
How to clear/remove observable bindings in Knockout.js?
ko.applyBindingsToNode vs. ko.applyBindingsToDescendants
Remove knockout js bindings on cloned element
https://github.com/knockout/knockout/issues/1821

Answer 1

我使用以下代码重新创建传递的 DOM 元素的内容（具有视图模型 + 模板选择器）：

function renderIntoElement(element, viewModel, templateSelector) {
    templateSelector = templateName || "#myTemplateId";
    var $element = $(element);
    var templateHtml = $(templateSelector).text(),

    $element.children().remove();
    $element = $element.append(templateHtml),

    ko.applyBindings(viewModel, $element.children()[0]);
}

希望对您有所帮助。

Answer 2

我根本不移动内容 div 而是围绕它构建扩展器，从而解决了这个问题。

我最初的策略是拥有一个可重复使用的扩展器视图 + 视图模型，并将内容 div 从原始位置移动到新组成的扩展器视图。移动已经绑定的内容不是个好主意，我猜。

新的策略适应了已经存在的divs并且只为扩展器组成了header。

不过还是谢谢你的想法。

如何通过敲除部分（重新）将绑定应用于后代？

How to partially (re)apply bindings to descendants with knockout?

javascript

binding

collapsable

expander

knockout.js