-1

最近，我使用 JSON2HTML v2.1.0 javascript 库。

但是，当我在 IE11 中使用带有函数的模板时，它不起作用。

这是我的完整 HTML 源代码：

    <!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsonTohtml</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.1.0/json2html.min.js"></script>
</head>

<body>
    <div class="modal-body" id="modal-news-body">
        <div class="cont-group">
            <div class="col-100">

            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var templates = {
        "detail":
        {"<>":"table","html":[
            {
                "<>":"colgroup", "html":[
                    {"<>":"col", "width":"20%"},
                    {"<>":"col", "width":"30%"},
                    {"<>":"col", "width":"20%"},
                    {"<>":"col", "width":"30%"}
                ]
            },
            {
                "<>":"tbody", "html":[
                    {"<>":"tr", "obj":function(){var arr=[]; var data_size = Object.keys(this).length; var i = 0; for(var key in this){if(i % 2 === 0){item = {};} item[key]=this[key]; if(i % 2 === 1 || data_size-1 === i){arr.push(item);} i++;} return(arr);}, "html":[
                        {"<>":"th", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.keys(obj)[0]);}
                            }
                        ]},
                        {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[0]);}
                            }
                        ]},
                        {"<>":"th", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.keys(obj)[1]);}
                            }
                        ]},
                        {"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[1]);}
                            }
                        ]}
                    ]}
                ]
            }
        ]}
    };
    
    var data = 
    {
        body: "<div id=\"content\" class=\"content\" role=\"main",
        date: "JULY 13, 2021",
        source: "SERGIO MATALUCCI",
        title: "The Hydrogen Stream: Plans for $75bn, 50 GW green energy hub in Western Australia",
        dummy_key: "dummy_value0"
    }
    
    var div = document.querySelector(".col-100");
    var li_html = json2html.render(data, templates.detail);
    div.innerHTML += li_html;
    </script>

此源代码在 chrome 中正常运行。

在 IE11 中，函数值保存在方法类型中。

所以，我担心这个库在 IE11 上不支持。

谁能解决这个问题？？

4

1 回答 1

0

我终于找到了我的问题。

正如 Fred Stark 所说，IE11 不能使用 ES6 风格。

为了改变 ES5 风格，我使用了 Babel。但是，它不能更改“模板”中的 javascript。

所以，我在模板中将我的 javascript 函数代码编辑为 ES5 样式。

麻烦就在这里：

{"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (Object.values(obj)[0]);}
                            }
                        ]}

并在这里编辑：

{"<>":"td", "html": [{
                            "<>":"span", "class":"ellipsis", "text":function(obj){return (obj[Object.keys(obj)[0]]);}
                            }
                        ]}

在 ES5 中，Object.values 不可用。

非常感谢大家。

于 2021-08-05T02:32:39.760 回答