我正在寻找 Chrome 扩展中支持的某种 JavaScript 模板引擎,最好不要设置“unsafe-eval”。
现在在这里查看其他问题,他们建议在部署之前预编译模板,但这对我不起作用,因为我不允许“用户”动态更改模板(以及通过插件选项)。 .. 这也是为什么我想要一个不需要“unsafe-eval”的模板引擎,因为用户并不意味着能够注入代码。只是制作非常简单的模板,使用来自 JSON 对象的属性。
字符串替换几乎就足够了……但也差不多,还需要一些简单的评估……“就像 x 大于 y 输出 a 否则 b”
我已经使用 doT.js 有一段时间了,它已经足够简单了,所以它的语义与它的语义相近或更简单。
这是 doT 中的简单示例...
<div class="card">
<header class="header {{= it.type }}">
<div class="project_id">
<div class="project">{{= it.project }}</div>
<div class="id">{{= it.id }}</div>
</div>
<div class="title">
<div class="nooverflow">{{= it.type }}: {{= it.summary }}</div>
</div>
<div class="sizeheader_size">
<div class="sizeheader">RELATIVE SIZE</div>
<div class="size">{{= it.estimate }}</div>
</div>
</header>
<section class="description">
<div class="nooverflow">{{= it.description }}</div>
</section>
<footer class="footer">
<div class="hours">
<span class="marked"></span>
<span class="{{?? it.days > 1 }}marked{{??}}"></span>
<span class="{{?? it.days > 2 }}marked{{??}}"></span>
<span class="{{?? it.days > 3 }}marked{{??}}"></span>
<span class="{{?? it.days > 4 }}marked{{??}}"></span>
<span class="{{?? it.days > 5 }}marked{{??}}"></span>
<span class="{{?? it.days > 6 }}marked{{??}}"></span>
<span class="{{?? it.days > 7 }}marked{{??}}"></span>
<span class="{{?? it.days > 8 }}marked{{??}}"></span>
<span class="{{?? it.days > 9 }}marked{{??}}"></span>
</div>
<div class="priorityheader_priority">
<div class="priorityheader">PRIORITY</div>
<div class="priority">{{= it.priority }}</div>
</div>
</footer>
</div>
如您所见,这不是最复杂的条件...