如何使剔除数据绑定对动态生成的元素起作用？例如，我在 div 中插入了一个简单的 html 选择菜单，并希望使用敲除选项绑定来填充选项。这是我的代码的样子：
$('#menu').html('<select name="list" data-bind="options: listItems"></select>');
但是这种方法不起作用。有什么想法吗？
【问题讨论】：
标签： javascript jquery knockout.js
如果您在绑定视图模型后动态添加此元素，它将不在视图模型中并且不会更新。你可以做两件事之一。
ko.applyBindings(); 重新绑定它【讨论】：
淘汰赛 3.3
ko.bindingHandlers.htmlWithBinding = {
'init': function() {
return { 'controlsDescendantBindings': true };
},
'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
element.innerHTML = valueAccessor();
ko.applyBindingsToDescendants(bindingContext, element);
}
};
上面的代码 sn-p 允许您使用“htmlWithBinding”属性动态注入 html 元素。然后还会评估添加的子元素...即它们的数据绑定属性。
【讨论】：
重写html绑定代码或创建一个新的。因为 html 绑定可以防止动态 html 中的“注入绑定”：
ko.bindingHandlers['html'] = {
//'init': function() {
// return { 'controlsDescendantBindings': true }; // this line prevents parse "injected binding"
//},
'update': function (element, valueAccessor) {
// setHtml will unwrap the value if needed
ko.utils.setHtml(element, valueAccessor());
}
};【讨论】：
对于 v3.4.0，使用下面的自定义绑定：
ko.bindingHandlers['dynamicHtml'] = {
'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// setHtml will unwrap the value if needed
ko.utils.setHtml(element, valueAccessor());
ko.applyBindingsToDescendants(bindingContext, element);
}
};
【讨论】：
编辑：自LosManos指出的 IIRC 版本 2.3 以来，这似乎不起作用
您可以使用 myViewModel[newObservable] = ko.observable('') 将另一个 observable 添加到您的视图模型中
之后，再次调用 ko.applyBindings。
这是一个简单的页面，我在其中动态添加段落，新的视图模型和绑定完美无缺。
// myViewModel starts only with one observable
var myViewModel = {
paragraph0: ko.observable('First')
};
var count = 0;
$(document).ready(function() {
ko.applyBindings(myViewModel);
$('#add').click(function() {
// Add a new paragraph and make the binding
addParagraph();
// Re-apply!
ko.applyBindings(myViewModel);
return false;
});
});
function addParagraph() {
count++;
var newObservableName = 'paragraph' + count;
$('<p data-bind="text: ' + newObservableName + '"></p>').appendTo('#placeholder');
// Here is where the magic happens
myViewModel[newObservableName] = ko.observable('');
myViewModel[newObservableName](Math.random());
// You can also test it in the console typing
// myViewModel.paragraphXXX('a random text')
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div id="placeholder">
<p data-bind="text: paragraph0"></p>
</div>
<a id="add" href="#">Add paragraph</a>【讨论】：
这是一个老问题，但这是我希望得到的最新答案（淘汰赛 3.3.0）：
当使用 knockout 模板或自定义组件将元素添加到预绑定的 observable 集合时，knockout 将自动绑定所有内容。您的示例看起来像是一个可观察的菜单项集合，可以开箱即用。
【讨论】：
基于this existing answer，我已经实现了与您最初的意图相似的东西：
function extendBinding(ko, container, viewModel) {
ko.applyBindings(viewModel, container.children()[container.children().length - 1]);
}
function yourBindingFunction() {
var container = $("#menu");
var inner = $("<select name='list' data-bind='options: listItems'></select>");
container.empty().append(inner);
extendBinding(ko, container, {
listItems: ["item1", "item2", "item3"]
});
}
这里有一个JSFiddle 可以玩。
请注意，一旦新元素成为 dom 的一部分，就无法通过调用 ko.applyBindings 重新绑定它——这就是我使用 container.empty() 的原因。如果您需要保留新元素并使其随着视图模型的变化而变化，请将 observable 传递给 extendBinding 方法的 viewModel 参数。
【讨论】：
查看此答案：How do define a custom knockout 'options binding' with predefined Text and Value options
ko.applyBindingsToNode 特别有用。
【讨论】：