Javascript 如何部分（重新）将绑定应用于具有敲除的子体？

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

这在大多数情况下都有效。但是，如果contentdiv包含例如knockout-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>

}

• 如果我拆下这条线

应用绑定子体（bindingContext，expanderContent）

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

• 如果我保留该行，则单击操作会起作用，但按钮会重复：

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

=>

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

---

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

---

希望这有帮助。

我解决了这个问题，没有移动content div，而是围绕它构建了扩展器

我最初的策略是使用可重用的expander view+视图模型，并将content div从原始位置移动到新组合的expander视图。我想，在已经绑定好的内容周围移动不是个好主意

新的策略适应了已有的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);
  }

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]);
}