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

【问题标题】：Containerless control flow syntax - the templates don't render properly with IE8无容器控制流语法 - 模板无法使用 IE8 正确呈现
【发布时间】：2012-08-26 16:23:14
【问题描述】：

使用无容器语法并调用 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 的行为模式。渲染是随机的。

除了不使用无容器控制流语法之外，我该如何解决这个问题？

Fiddle

LE：如果这很重要，我正在使用 F12 开发人员工具

【问题讨论】：

标签： javascript knockout.js internet-explorer-8

【解决方案1】：

Fixed jsFiddle

我在内部绑定中添加了&nbsp;，它似乎已经解决了这个问题。似乎 IE8 中的淘汰赛不喜欢没有内容的嵌套无容器控件绑定。

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

【讨论】：

谢谢，确实，我最终会这样做。我希望文档中没有提到这个技巧，所以我不会责怪自己没有阅读整个文档..
别出汗。我注意到旧版 IE 浏览器中的无容器控件绑定有很多“特殊”行为。其中大部分可以通过删除空格/换行符或引入一些任意 HTML 内容来解决。最后，我只是将我的大部分无容器控件绑定重写为元素上的数据绑定表达式。

【解决方案2】：

我很幸运在 IE8 中使用了这种结构。当我试图像您在原始帖子中显示的那样将无容器的东西分开时，IE8 抱怨道。通过使用如下所示的语法，它可以正常工作。

<table id="mam-listing-table" border="0" width="100%" cellpadding="2" cellspacing="0">
    <thead>
        <tr valign="top">
            <th class="ms-vh" nowrap="">Team</th>
            <th class="ms-vh" nowrap="" colspan="99">Note Count</th>
        </tr>
        <tr valign="top">
            <th class="ms-vh" nowrap=""></th>

            <!-- ko foreach: Months -->
                <th class="ms-vh" nowrap="" data-bind="text: $data "></th>
            <!-- /ko -->

            <th class="ms-vh" nowrap="" data-bind="text: 'TOTAL as of ' + moment().format('MM/DD/YY')"></th>
        </tr>
    </thead>

    <tbody>

        <!-- ko template: { name: 'Site', foreach: Sites} -->
        <!-- /ko -->  
        <!-- ko template: { name: 'Total'} -->
        <!-- /ko -->  

    </tbody>

</table>

【讨论】：