Javascript 使用RequireJS和Require文本的敲除模板在IE 8中不起作用_Javascript_Knockout.js_Internet Explorer 8_Requirejs_Requirejs Text

Javascript 使用RequireJS和Require文本的敲除模板在IE 8中不起作用

javascript knockout.js internet-explorer-8 requirejs

Javascript 使用RequireJS和Require文本的敲除模板在IE 8中不起作用,javascript,knockout.js,internet-explorer-8,requirejs,requirejs-text,Javascript,Knockout.js,Internet Explorer 8,Requirejs,Requirejs Text,在使用IE8时，我在JavaScript中呈现树对象时遇到问题。为了在HTML页面中编写层次结构，我需要使用淘汰模板递归地呈现树对象我使用knockout组件使用requirejs和require.text呈现最终结果该组件在除IE8之外的所有浏览器中都运行良好。我知道我不应该使用IE8，但这是一家公司的内部网站，目前无法轻松升级所有浏览器。我简化了代码，仅使用模板在普通列表中呈现数字列表下面是test.vm.js中的ViewModel： define(['knockout'], fun

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

我使用knockout组件使用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>


应用程序
require.config({
baseUrl:“/”，
路径：{
“knockout”：“Scripts/knockout-3.2.0”，
“text”：“Scripts/require.text”
}
});
$（文档）.ready（函数（）{
require（['knockout']，函数（ko）{
ko.applyBindings（）；
});
});
require（['knockout']，函数（ko）{
ko.components.register（'TestComponent'{
viewModel:{require:'Scripts/test.vm'}，
模板：{require:'text！Scripts/test.view.js'}
});
});

我在浏览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页面中，那么组件就开始工作了。组件不工作只是因为模板为空。在HTML中放置“testTemplate”是一个部分解决方案，但我需要找到为什么它在视图文件中放置时不起作用

更新：

我简化了场景。显然，组件注册中的“模板”参数中存在一些错误。如果模板包含在脚本标记中，则内容将被忽略，不会在页面中呈现。如果我决定将其更改为使用

标记，组件将尝试解析模板内的数据绑定，并显示错误。在绑定中应该忽略模板标记，但组件不会忽略这些标记。我尝试了一个临时的hack，通过将模板封装在textarea标记中并放置display:none，我读取的最后一个标记被配置为被模板忽略。现在所有浏览器都能显示内容，但我不喜欢这个解决方案。

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

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

我们有我们的HTML文件内的模板，并使用！带后缀以删除包装HTML和正文标记。这将成功加载模板，并提供更好的编辑器支持，因为文件扩展名对于编辑标记是正确的