3

テンプレートで使用される変数とそれらの間の可能な依存関係を自動的に推測する 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: ""}

この機能が必要な理由は、テンプレートを完成させるために必要な変数を反映するフィールドを含むフォームを生成できるようにしたいからです。

4

1 に答える 1

2

このスニペット ( http://jsfiddle.net/CfaAW/2/で編集) は、Regex を使用して単純な構文を見つけ、Handlebars パスを処理する{{var}}ためにも検索します。.

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":""}
于 2011-11-22T00:05:06.033 に答える