IE11 支持 json2html 吗?
json2html is support in IE11?
最近,我使用 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 bn, 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。
谁能解决这个问题??
我终于找到了我的问题。
正如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 不可用。
非常感谢大家。
最近,我使用 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 bn, 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。
谁能解决这个问题??
我终于找到了我的问题。
正如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 不可用。
非常感谢大家。