无容器控制流语法 - IE8无法正确呈现模板

Question

当使用无容器语法并调用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开发人员工具

Answer 1

修正了jsFiddle

我已经添加了一个 内部绑定,它似乎已经解决了问题.IE8中的淘汰似乎不喜欢没有内容的嵌套容器控件绑定.

请注意,根据我的经验,无容器控件绑定往往在IE6-IE8中显示不稳定的行为.如果您打算支持这些浏览器,我建议您避免使用无容器控件绑定.几乎所有涉及无容器控件绑定的场景都可以使用带有数据绑定表达式的HTML元素重写为替代方案.