Библиотека шаблонов Javascript, которая определяет используемые переменные и зависимости

Есть ли библиотека шаблонов 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: ""}

Причина, по которой мне нужна эта функция, заключается в том, что я хотел бы иметь возможность создавать форму с полями, отражающими переменные, необходимые для завершения шаблона.


javascript templates dependency-management templating templating-engine
person mac    schedule 29.10.2011    source источник
comment
Это хорошая идея. В зависимости от того, что позволяют делать включения шаблона, это может быть несколько сложнее.   -  person Pointy    schedule 29.10.2011
comment
Вы можете проверить KnockOut.js или Backbone.js, я думаю, они справляются с подобными вещами.   -  person Deleteman    schedule 29.10.2011
comment
Я сделал. KnockOut.js обрабатывает зависимости в модели представления, но не в шаблоне. Backbone.js зависит от метода шаблона Underscore.js, который не поддерживает вывод свободных переменных из шаблона.   -  person mac    schedule 29.10.2011
comment
@mac просто для исправления, Backbone.js не зависит от метода шаблона underscore.js, backbone зависит от подчеркивания, но вам не обязательно использовать его сам по себе шаблонный метод, вы также можете использовать шаблоны jquery, усы, .. . любой другой фреймворк, который вам нравится   -  person Sander    schedule 22.11.2011
comment
@Sander Спасибо за разъяснения.   -  person mac    schedule 22.11.2011

Ответы (1)


arrow_upward
2
arrow_downward

Этот фрагмент (отредактируйте на 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":""}
person Kevin Hakanson    schedule 22.11.2011