Question

我创建了一个自定义的knockout绑定，它将扩展器中的给定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）;

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

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

=＆GT;如何以修复方式更新已移动内容的绑定点击绑定并不重复我的按钮？

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

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

Answer 1

我解决了这个问题，完全不移动内容div，而是在它周围构建扩展器。

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

新策略适应已存在的div并仅编写扩展器的标头。

然而，谢谢你的想法。

Answer 2

我使用以下代码重新创建传递的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]);
}

希望这有帮助。

如何部分（重新）将绑定应用于具有淘汰赛的后代？

2 个答案: