rwa*_*ter 16 javascript jquery dom-manipulation knockout.js
我试图让Knockout组件在初始化后绑定,ko.applyBindings();这样我就可以动态添加自定义元素.
在我的原始帖子中,我提到通过ajax加载内容,但是当使用类似jQuery的东西将自定义元素添加到DOM时,我的问题就出现了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>
我已经看到了用它们加工页面的快乐,一切都很美妙......直到我加载了包含的新内容(例如一个装有AJAX的模态弹出窗口)<mynew-widget></mynew-widget>.什么都没发生.
这是Knockout的限制还是我错误地连线了？
请告诉我是后者-我爱不必担心何时/何打电话ApplyBindings和DOM的哪些部分.
仔细考虑,我知道淘汰赛需要注意到自定义元素已添加到DOM中 - 但我希望它可能只是以jQuery $().on(...)的方式工作.
Jot*_*aBe 22
组件绑定不会神奇地发生:它会在您调用时发生ko.applyBindings();.此时,绑定的HTML将搜索组件,并绑定它们.
稍后,当您向页面动态添加新组件时,它不受约束,除非您明确绑定它.因此,在您的代码中,组件完全被忽略.
如上所述,您需要做的是明确绑定它.但是您必须考虑到您无法绑定已绑定的节点.但是,使用jquery创建节点非常容易,将其附加到DOM并绑定它.有一种语法可以指定viewmodel以及要将其绑定到的节点:ko.applyBindings(viewModel, node);
在这里,您可以在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]);
});
注意:调用apply bindings时,我传递一个空的objet:不传递null,否则你会收到错误.如果您的模板包含一个视图模型,它将独立于传递的视图模型使用.
注意:$ newWidget是一个jquery对象.$ newWidget [0]是jQuery对象的第一个(也是唯一的,在这种情况下)DOM元素,如applyBindings所要求的那样
| 归档时间： |
|
| 查看次数： |
5214 次 |
| 最近记录： |