Javascript模板庫，用於推斷使用過的變量和依賴項

Question

是否有一個Javascript模板庫可以自動推斷模板中使用的變量以及它們之間可能存在的依賴關系？ 例如，如果我有一個看起來像這樣的模板（ Handlebars語法）：

<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
</script>

我希望能夠做到這樣的事情：

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
template.vars() => {title: "", body: ""}

我希望這個功能的原因是我希望能夠生成一個表單，其中的字段反映了完成模板所需的變量。

Answer 1

此代碼段（在http://jsfiddle.net/CfaAW/2/上編輯）使用正則表達式來查找簡單的{{var}}語法，並且還會查找. 處理Handlebars路徑。

function extractObjectFromTemplate(source) {
    var handlebarsRegex = /\{\{([\s\S]+?)\}\}/g;
    var varObject = {};
    var varArray, ns, o, i, len;
    while ((varArray = handlebarsRegex.exec(source)) !== null) {
        ns = varArray[1].split('.');
        o = varObject;
        for (i = 0, len = ns.length; i < len; i++) {
            o = o[ns[i]] = o[ns[i]] || (i == len - 1 ? "" : {});
        }
    }

    return varObject;
}

在您的模板上， JSON.stringify(extractObjectFromTemplate(source))為您提供：

{"title":"","body":""}

以及模板中的Handlebars Paths

<h1>{{title.h1}}</h1>
<h2>{{title.h2}}</h2>
<div class="body">
  {{body}}
</div>

您將獲得嵌套屬性

{"title":{"h1":"","h2":""},"body":""}