Javascript 剔除组件（未绑定到新内容） 修订的问题和例子

我试图让敲除组件在初始

ko.applyBindings（）之后绑定以便可以动态添加自定义元素

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

下面是一个例子：


$（函数（）{
//注册一个简单的小部件：
ko.components.register（'like-widget'{
模板：“这是小部件”
});
//应用绑定
ko.applyBindings（）；
//连接“添加”按钮：
$（'#btnAdd'）。在（'click'，function（）上{
$（'#addZone'）。追加（“”）；
});
});

这是一个声明为内联的小部件：
将新小部件添加到灰色框：



小部件将附加在这里
运行此代码时，小部件自定义元素确实会添加到框中（请参阅源代码），但小部件的模板没有绑定，因此不会显示任何内容。如何使其绑定/显示

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

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

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

。这是小提琴中的代码：

HTML:

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

将新小部件添加到灰色框中：



小部件将附加在这里

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

ko.components.register（'like-widget'{
模板：“这是小部件”
});
ko.applyBindings（）
$（'#btnAdd'）。在（'click'，function（）上{
//创建小部件节点
var$newWidget=$（''）；
//将其附加到“附加区域”
$（'#addZone'）.append（$newWidget）；
//将绑定应用于新添加的节点
ko.applyBindings（{}，$newWidget[0]）；
});

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

注意：$newWidget是一个jquery对象$newWidget[0]是jQuery对象的第一个（在本例中也是唯一一个）DOM元素，这是applyBindings所要求的，您需要包括您正在尝试执行的操作的代码示例。我们无法帮助您调试上面的内容+您可能没有正确地连接经过K编辑和重新调整的内容。另外，我知道你可能想用KO本身实现btnAdd功能，但是我不想允许完全的灵活性。好的，谢谢你，这很清楚。您认为有可能以某种方式将其包装起来，以便开发人员能够以简单的方式在HTML中添加这些组件吗？e、 g通过观察整个DOM突变并触发applyBindings（）？可以观察HTML突变（）。但是您必须注意我上面解释的一点：不能在同一个元素上应用两次绑定。这包括不将绑定应用于已绑定元素的子元素。然而，当您动态添加一个项目时，您似乎没有这个问题。请尝试一下，如果你有问题，请告诉我。有一种技术可以避免元素及其子元素绑定。
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]);
});