ember.js - Handlebars - 将 Handlebars 编译后的代码反编译为 Handlebars 模板

Question

是否可以将 Handlebars 预编译代码反编译为 Handlebars 模板？

可能转换成这样:
function program2(depth0, data) {
var buffer = '', stack1;
data.buffer.push('<div ');
......
data.buffer.push('</div></div>');
return buffer;
}
到

<div>{{name}}</div>

Answer 1

不幸的是，目前没有内置的方法可以做到这一点。

一种解决方案是编写一个遍历已编译代码的函数，查找 HTML 被推送的位置，然后将该 HTML 重新组合在一起(本质上是对该函数进行逆向工程)。

有一个缺点:编译的模板使用 depth0变量来存储从您的模型/对象传入的。你可以看到，其他对象作为参数传入，每个编译的模板正在被实例化，IE::

App.Templates = function (Handlebars, depth0, helpers, partials, data) { ... }

因此，您必须遵循每段 HTML 的呈现方式，并找到与将它们作为 stack 插入的表达式相对应的变量名称。变量。您需要获取所用变量的名称，以便您可以添加回模板中每个 Handlebars 块的属性(即: {{myData}} )以及使用的表达式(如果它是块表达式)。

假设我有一个简单的模板:

{{#if stuff}}
    <div id="General" class="content-section">
    <p>{{myData}}</p>
    </div>
{{/if}}

depth0对象将包含 stuff和 myData .它们像这样在模板内部使用(这不是一个工作示例，我编辑了一个模板来向您展示它的样子):

buffer += "\r\n\r\n<div id=\"General\" class=\"content-section\">\r\n"
    + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.stuff)),
    stack1 == null || stack1 === false ? stack1 : stack1.myData)), 
    typeof stack1 === functionType ? stack1.apply(depth0) : stack1))

希望这会有所帮助 - 如果您想投入工作，这当然是可行的。