Библиотека шаблонов 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}} синтаксис, а также будет искать . обрабатывать руль дорожки.

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 в вашем шаблоне

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

вы получите вложенные свойства

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