淘汰组件（不）绑定到新内容答案

【问题标题】：Knockout components (not) binding on new content淘汰组件（不）绑定到新内容
【发布时间】：2015-01-24 02:42:41
【问题描述】：

编辑的问题和示例

我试图让 Knockout 组件在初始 ko.applyBindings(); 之后绑定，以便我可以动态添加自定义元素。

在我的原始帖子中，我提到了通过 ajax 加载内容，但是当使用 jQuery append 之类的东西将自定义元素添加到 DOM 时，就会出现问题。

这是一个例子：

$(function() {

  // Register a simple widget:
  ko.components.register('like-widget', {
    template: '<div class="alert alert-info">This is the widget</div>'
  });

  // Apply bindings
  ko.applyBindings();


  // Wire up 'add' button:
  $('#btnAdd').on('click', function() {

    $('#addZone').append("<like-widget></like-widget>");


  });

});

<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<body>

  Here's a widget, declared inline:
  <like-widget></like-widget>

  <button id='btnAdd'>Add a new widget to the grey box:</button>
  <br/><br/>

  <div id='addZone' class="well">
    Widgets will be appended here
  </div>

  <p>When you run this code, the widget custom element is indeed added to the box (see source) but the widget's template is not bound, so nothing appears. How do I get it to bind/appear?</p>


</body>

原帖

我已经成功创建了我的新组件<mynew-widget></mynew-widget>

我已经看到了在我的页面上添加它们的乐趣，并且一切都运行良好......直到我加载包含<mynew-widget></mynew-widget> 的新内容（例如，加载 AJAX 的模式弹出窗口）。什么都没有发生。

这是 Knockout 的限制还是我接线错误？

请告诉我是后者 - 因为我喜欢不必担心何时/在何处调用 ApplyBindings 以及在 DOM 的哪些部分。

经过深思熟虑，我知道淘汰赛需要注意自定义元素已添加到 DOM 中 - 但我希望它可能只是以 jQuery '$().on(...)' 之类的方式工作。

【问题讨论】：

您需要包含您正在尝试做的事情的代码示例。照原样，我们无法帮助您调试
以上+你可能没有正确接线
好的 - 已编辑和重新调整。另外 - 我知道你可能想用 KO 本身实现 btnAdd 功能，但我只想说我不想允许完全的灵活性。

标签： javascript jquery knockout.js dom-manipulation

【解决方案1】：

组件绑定不会神奇地发生：它会在您调用ko.applyBindings(); 时发生。此时，在绑定的 HTML 中搜索组件，并绑定。

稍后，当您向页面动态添加新组件时，它不会被绑定，除非您显式绑定它。因此，在您的代码中，该组件被完全忽略。

如上所述，您需要做的是显式绑定它。但是必须考虑到不能绑定已经绑定的节点。但是，使用 jquery 创建节点、将其附加到 DOM 并绑定它非常容易。有一种语法可以指定视图模型和要绑定它的节点：ko.applyBindings(viewModel, node);

Here you have a full working sample in jsfiddle。这是那个小提琴中的代码：

HTML：

这是一个小部件，声明为内联：

  <button id='btnAdd'>Add a new widget to the grey box:</button>
  <br/><br/>

  <div id='addZone' class="well">
    Widgets will be appended here
  </div>

JavaScript：

ko.components.register('like-widget', {
    template: '<div class="alert alert-info">This is the widget</div>'
  });

ko.applyBindings()

$('#btnAdd').on('click', function() {
   // Create your widget node
   var $newWidget = $('<like-widget>');
   // Append it to your "append area"
   $('#addZone').append($newWidget);
   // Apply bindings to the newly added node
   ko.applyBindings({}, $newWidget[0]);
});

注意：当调用应用绑定时，我传递了一个空对象：不要传递空值，否则会出错。如果您的模板包含视图模型，它将独立于传递的视图模型使用。

注意：$newWidget 是一个 jquery 对象。 $newWidget[0] 是 jQuery 对象的第一个（也是唯一一个）DOM 元素，如 applyBindings 所要求的

【讨论】：

好的，谢谢，这个很清楚了。您是否认为有可能以某种方式将其包装起来，以便开发人员可以仅在 HTML 中以万无一失的方式添加这些组件？例如，通过观察整体 DOM 突变并触发 applyBindings()？
可以观察到 HTML 突变 (stackoverflow.com/questions/2844565/…)。但是你必须小心我上面解释的一些事情：你不能在同一个元素上应用两次绑定。这包括不对已绑定元素的子元素应用绑定。但是，当您动态添加项目时，您似乎没有这个问题。请尝试一下，如果你遇到这个问题，请告诉我。有一种技术可以避免元素及其子项绑定。