Javascript模板庫，推斷使用的變量和依賴關係

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

<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: ""}

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

來源

2011-10-29 mac

這是一個很好的理想一個。根據模板「內含物」允許您執行的操作，它可能會變得非常複雜。 – Pointy

你可以看看KnockOut.js或Backbone.js我認爲他們處理這種事情。 – Deleteman

我做到了。 KnockOut.js處理視圖模型中的依賴關係，但不處理模板。 Backbone.js依賴於Underscore.js的模板方法，它不支持從模板推斷自由變量。 – mac

這個片段（編輯在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":""}

，並在您的模板把手路徑

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

你會得到嵌套屬性

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

來源

2011-11-22 00:05:06

Javascript模板庫，推斷使用的變量和依賴關係

回答

相關問題