0

使用 IE8 时，我在 JavaScript 中渲染树对象时遇到问题。为了在 HTML 页面中编写层次结构，我需要使用敲除模板递归地渲染树对象。

我正在使用剔除组件来使用 requirejs 和 require.text 呈现最终结果

该组件在除 IE8 之外的所有浏览器中都可以正常工作。我知道我不应该使用 IE8，但这是一个公司的内部网站，目前无法轻松升级所有浏览器。我简化了代码，只使用模板在普通列表中呈现数字列表。

这是 test.vm.js 中的 ViewModel：

define(['knockout'], function(ko) {

function TestViewModel() {
    var self = this;
    self.Title = "Example";
    self.List = [
        { Name: "1" },
        { Name: "2" },
        { Name: "3" },
        { Name: "4" }
    ];
}

return TestViewModel;
});

这是 test.view.js 中的视图：

<script type="text/html" id="testTemplate">
<li data-bind="text: Name"></li>
</script>

<div>
<div data-bind="text: Title"></div>
<ul data-bind="template: {name: 'testTemplate', foreach: List}">
</ul>
</div>

最后，调用该组件的 HTML 页面：

<html>
<head>
    <meta charset="utf-8" />
    <title>App</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/require.js"></script>
</head>
<body>


<script type="text/javascript">

    require.config({
        baseUrl: "/",
        paths: {
            'knockout': 'Scripts/knockout-3.2.0',
            'text': 'Scripts/require.text'
        }
    });


    $(document).ready(function () {
        require(['knockout'], function (ko) {
            ko.applyBindings();
        });
    });

    require(['knockout'], function (ko) {
        ko.components.register('TestComponent', {
            viewModel: { require: 'Scripts/test.vm' },
            template: { require: 'text!Scripts/test.view.js' }
        });
    });
</script>

<!-- ko component: { name: "TestComponent" } -->
<!-- /ko -->

</body>
</html>

我可以看到浏览 DOM 的主要区别是模板完全在其他浏览器中呈现

<script id="testTemplate" type="text/html">
<li data-bind="text: Name"></li>
</script>

而在 IE8 中为空

<SCRIPT id=testTemplate type=text/html __ko__1453323521948="ko12"></SCRIPT>

如果我将模板“testTemplate”放在视图文件之外并直接放在 HTML 页面中，组件就会开始工作。组件不工作只是因为模板是空的。将“testTemplate”放在 HTML 中是一个部分解决方案，但我需要找出为什么它在放置在视图文件中时不起作用。

更新：我简化了场景。显然是组件注册中的“模板”参数中的一些错误。如果模板包含在脚本标签中，则内容将被忽略并且不会在页面中呈现。如果我决定将其更改为使用<template>标签，组件会尝试解析模板内的数据绑定并显示错误。模板标签应该在绑定中被忽略，但组件不会忽略标签。我尝试使用我阅读的最后一个标签进行时间破解，通过将模板包含在 textarea 标签中并放置 display:none 来配置为被模板忽略。现在内容在所有浏览器中呈现，但我不喜欢这个解决方案。

4

1 回答 1

0

我在一家仍然使用 Windows XP 的公司工作，所以我也仅限于 IE8。我们成功地使用了带有 require.js 和文本插件的淘汰组件模板。

回覆。“如果模板包含在脚本标签中，则内容将被忽略并且不会在页面中呈现”：

我们在 HTML 文件中有我们的模板，并使用 !strip 后缀来删除包装 HTML 和正文标签。这成功地加载了模板并提供了更好的编辑器支持，因为文件扩展名对于编辑标记是正确的。

于 2017-01-25T11:28:39.550 回答