JavaScript模板，为什么这么棒？

我一直在寻找JavaScript模板库，如dust.js和其他更广泛的库，如canJSJavaScript模板，为什么这么棒？

我在哪里工作，我们在客户端执行了将近99％的任何应用程序/站点。目前，我只是建立html字符串，注入dom，监听点击/动作，做Ajax，从结果中构建更多的html字符串并注入dom等。

如果你把这个简单的example。

//stringbuilder 
function StringBuilder(e){this.strings=new Array("");this.append(e)}StringBuilder.prototype.append=function(e){if(e){this.strings.push(e)}};StringBuilder.prototype.clear=function(){this.strings.length=1};StringBuilder.prototype.toString=function(){return this.strings.join("")} 

var data = { 
    fname: "Joe", 
    lname: "Doe", 
    occupation: "Developer", 
    things: ["some", "list", "of", "things"] 
} 

var sb = new StringBuilder(); 

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>"); 
sb.append("<p>Occupation: " + data.occupation + "</p>"); 
sb.append("<h3>A list of things</h3>"); 
sb.append("<ul>"); 
for (var i = 0; i < data.things.length; i++) { 
    sb.append("<li>" + data.things[i] + "</li>"); 
} 
sb.append("</ul>"); 

$("#output").html(sb.toString());

以什么方式可以通过模板改进？从我所看到的，我将不得不适应一种特殊的模板语法，这种语法比上面的语句更容易阅读或维护。怎么样复杂的布局，或者你有递归的场景（列表内的列表不知道它可能会有多少级别）。我觉得模板语法/引擎在某些情况下是我的限制因素。

我想完全可以将该HTML从JS中完全拉出来，但是可以说使用带有HTML内部模板语法的脚本标记不在表格中，我并不特别希望将模板作为我需要的外部文件执行额外的读取请求。

请教育我！

来源

2012-12-18 Fergal

我想说EJS或玉是你最好的选择。他们有客户端和服务器支持。 – elclanrs

你在做什么已经是一种模板形式。 – Christophe

好，只是比较：

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>"); 
sb.append("<p>Occupation: " + data.occupation + "</p>"); 
sb.append("<h3>A list of things</h3>"); 
sb.append("<ul>"); 
for (var i = 0; i < data.things.length; i++) { 
    sb.append("<li>" + data.things[i] + "</li>"); 
} 
sb.append("</ul>");

要

<h1>@fname @lname</h1> 
<p>Occupation: @occupation</p> 
<h3>A list of things</h3> 
<ul> 
    @foreach(thing in things) { 
     <li>@thing</li> 
    } 
</ul>

它看起来更易于维护的你？

demo

来源

2012-12-18 00:20:20 Esailija

我认为这个问题是厌恶新事物的一个典型例子。 Methinks的OP不容易相信:) – jevakallio

@fencliff是的，我想你必须是真正的固执不被这个说服..这个语法支持随时下降到任意的JavaScript，辅助功能，进口/出口，加上所有的控制结构从'@ foreach'的JavaScript是必要的另外 – Esailija

谢谢，在我的搜索没有遇到企图。蝙蝠看起来像是可以击败我的固执的东西。 template.fromString对我来说是完美的，正如我所说的，它可能并不总是有可能在DOM本身中有模板。模板语法也比我见过的其他任何东西都要干净得多。 – Fergal

在 Mustache.js

这个模板：

sb.append("<h1>" + data.fname + " " + data.lname + "</h1>"); 
sb.append("<p>Occupation: " + data.occupation + "</p>"); 
sb.append("<h3>A list of things</h3>"); 
sb.append("<ul>"); 
for (var i = 0; i < data.things.length; i++) { 
    sb.append("<li>" + data.things[i] + "</li>"); 
} 
sb.append("</ul>");

移动到DOM和看起来像这样在你的IDE：

<script id="sb"> 
    <h1>{{fname}} {{lname}}</h1> 
    <p>Occupation: {{occupation}}</p> 
    <h3>A list of things</h3> 
    <ul> 
    {{#things}} 
     <li>{{.}}</li> 
    {{/things}} 
    </ul> 

</script>

它会保持你的代码中突出IDE，如果没有"<div>" s

通过使用呈现此：

var output = Mustache.render($("sb").html(), data); 
$("#destination").html(output);

来源

2012-12-18 00:23:36

通过使用dust.js您可以创建一个模板文件，该文件是这样的：

<h1>{fname} {lname}</h1> 
<p>Occupation: {occupation}</p> 
<h3>Friends list:</h3> 
<ul> 
    {#friends} 
    <li>{name} {age}</li> 
    {/friends} 
</ul>

你的JSON数据：

var data = { 
    fname: "Joe", 
    lname: "Doe", 
    occupation: "Developer", 
    friends: [ 
    { 
     name: "Moe", 
     age: 37 
    }, 
    { 
     name: "Larry", 
     age: 39 
    }, 
    { 
     name: "Curly", 
     age: 35 
    } 
    ] 
}

而且使您的模板只需调用dust.render并将template_name与JSON对象和回调函数一起传递：

dust.render('template_name', data, function(err, out){ 
    $("#output").html(out); 
});

另一个有用的和相关的问题：how to use dustjs-linkedin as client side templating?

来源

2012-12-18 08:58:34

JavaScript模板，为什么这么棒？

回答

相关问题