剔除组件(不绑定)在新内容上 [英] Knockout components (not) binding on new content
问题描述
我试图在初始ko.applyBindings();之后绑定Knockout组件，以便可以动态添加自定义元素.
I'm trying to get Knockout components to bind after the initial ko.applyBindings(); so I can add custom elements dynamically.
在我的原始文章中，我提到通过ajax加载内容，但是当使用诸如jQuery append之类的东西将自定义元素添加到DOM时，就会出现我的问题.
In my original post I referred to loading content by ajax, but my problem occurs when custom elements are added to the DOM using something like jQuery append.
这是一个例子:
$(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>
I've successfully created my new component, <mynew-widget></mynew-widget>
我已经看到了在其中添加内容的乐趣，并且一切工作都很好...直到加载包含<mynew-widget></mynew-widget>的新内容(例如，加载了AJAX的模式弹出窗口).什么都没发生.
I've seen the joy of peppering my page with them and everything works beautifully... until I load new content (an AJAX-loaded modal popup, for example) which contains <mynew-widget></mynew-widget>. Nothing happens.
这是淘汰赛的限制吗?还是我接线不正确?
Is this a limitation of Knockout or have I wired things up incorrectly?
请告诉我是后者-因为我爱不必担心何时/何处调用ApplyBindings以及DOM的哪些部分.
Please tell me it's the latter - as I love not having to worry about when/where to call ApplyBindings and on which parts of the DOM.
仔细研究一下，我了解敲除需要注意的是自定义元素已添加到DOM中-但我希望它可能仅以jQuery'c6>的方式工作.
Thinking it through, I understand knockout needs to notice that the custom elements have been added to the DOM - but I was hoping it might just work in a jQuery '$().on(...)' kind of way.
推荐答案
组件绑定并不是神奇地发生的:它在您调用ko.applyBindings();时发生.此时，将在绑定的HTML中搜索组件，然后将它们绑定.
The component binding doesn't happen magically: it happens when you call ko.applyBindings();. At this moment, the bound HTML is searched for components, and they are bound.
稍后，当您将新组件动态添加到页面时，它没有绑定，除非您明确绑定了它.因此，在您的代码中，该组件将被完全忽略.
Later on, when you dynamically add a new component to the page, it's not bound, unless you explicitly bind it. So, in your code, the component is fully ignored.
如上所述，您需要做的是显式绑定它.但是您必须考虑到不能绑定已经绑定的节点.但是，使用jquery创建节点，将其附加到DOM并进行绑定是非常容易的.有一种语法可以指定视图模型以及要将其绑定到的节点:ko.applyBindings(viewModel, node);
As stated, what you need to do is to explicitly bind it. But you must take into account that you cannot bind nodes that have already been bound. However it's extremely easy to create a node with jquery, append it to the DOM, and bind it. There is a syntax to specify the viewmodel and the node to which you want to bind it: ko.applyBindings(viewModel, node);
此处是jsfiddle中完整的工作示例.这是小提琴中的代码:
Here you have a full working sample in jsfiddle. This is the code in that fiddle:
HTML:
这是一个内联声明的小部件:
Here's a widget, declared inline:
<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:
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]);
});
注意:调用Apply绑定时，我传递了一个空对象:不要传递null，否则会出现错误.如果您的模板包含一个视图模型，则它将独立于传递的视图模型使用.
注意:$ newWidget是一个jquery对象. $ newWidget [0]是jQuery对象的第一个(也是唯一的，在这种情况下)DOM元素，这是applyBindings
这篇关于剔除组件(不绑定)在新内容上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
