当使用无容器语法并调用 Knockoutjs 模板时,IE8 无法在 foreach 控制流内正确呈现模板。初始化工作正常,但如果 items
发生更改,则渲染错误。这种情况只发生在 IE8 上,9 还可以,甚至 7 也可以。
型号
function BrowseModel() {
var self = this;
self.items = ko.observableArray();
self.itemsStep = ko.observable(1);
self.repopulate = function() {
self.itemsStep(self.itemsStep() + 3);
return false;
};
ko.computed(function() {
var arr = [];
for (var i = self.itemsStep(); i <= self.itemsStep() + 5; i++) {
arr.push(i);
}
self.items(arr);
}, self);
}
ko.applyBindings(new BrowseModel());
查看
<a href="javascript:;" data-bind="click: repopulate">Change items</a>
<ul>
<!-- ko foreach: items -->
<!-- ko template: { name: 'product_template'} -->
<!-- /ko -->
<!-- /ko -->
</ul>
<ul>
<li data-bind="template: { foreach: items, name: 'product_template' }"></li>
</ul>
<br />
<div data-bind="text: ko.toJSON($data)"></div>
<script type="text/html" id="product_template">
<li data-bind="text: $data"></li>
</script>
我没有找到 IE 8 的行为模式。渲染是随机的。
除了不使用无容器控制流语法之外,我该如何解决这个问题?
LE:如果这确实重要,我正在使用 F12 开发者工具
最佳答案
我在内部绑定(bind)中添加了一个
,它似乎已经解决了问题。看来 IE8 中的 knockout 不喜欢没有内容的嵌套无容器控件绑定(bind)。
请注意,根据我的经验,无容器控件绑定(bind)往往会在 IE6-IE8 中表现出不稳定的行为。如果您打算支持这些浏览器,我建议您避免使用无容器控件绑定(bind)。几乎所有涉及无容器控件绑定(bind)的场景都可以重写为带有数据绑定(bind)表达式的 HTML 元素的替代方案。
关于javascript - 无容器控制流语法 - 模板无法使用 IE8 正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12222311/