JavaScript模板系统

Question

当前我已经使用他们的API编写了一个twitter小部件。但是对于一些网站，我需要更改输出的布局和HTML结构。

目前我建的HTML像这样：

// Generate HTML 
var $con; 
$con = $("<div>", { "class" : "tweet" }) 
    .append($("<div>", { "class" : "twocol" }) 
    .append($("<div>", { "class" : "tweet-profile-photo" }) 
     .append($("<img>", { "src" : obj.user.profile_image_url, "class" : "responsive-img" })) 
    ) 
) 
    .append(($("<div>", { "class" : "tencol last" }) 
    .append(($("<div>", { "class" : "tweet-head" }) 
     .append($("<div>", { "class" : "eightcol" }) 
     .append($("<div>", { "class" : "tweet-name" }) 
        .append(obj.user.name) 
       ) 
     .append($("<div>", { "class" : "tweet-to-from" })) 
    )) 
     .append($("<div>", { "class" : "fourcol last tweet-date" }) 
       .append(((settings.disableDate===true)?"":fullDate)) 
      ) 
    )) 
    .append($("<div>", { "class" : "twelvecol tweet-text" }) 
     .append($("<span>") 
     .append(text) 
    ) 
    ) 
    .append($("<div>", { "class" : "tweet-footer" }) 
     .append($("<div>", { "class" : "twelvecol", "style" : "display:none;" }) 
     .append($("<i>", { "class" : "fa fa-retweet", "aria-hidden" : "true" })) 
     .append($("<span>", { "class" : "tweet-retweeted" })) 
    ) 
    ) 
); 

$(container).append($con); 

正如我上面所说，有时候我需要改变的布局和输出，是有办法，我可以做出某种模板，所以我可以制作不同的标题，然后为每条推文的主体提供不同的模板。然后，我可以将此内容发送给JavaScript，并使用内容填充HTML。

有关我如何做到这一点的任何想法？我正在考虑XAML或沿着他们的线条，这就像保持它基于对象，而不是搜索字符串或类似的东西。

Answer 1

尝试jQuery templates，这很简单，但做了这份工作，我已经与它合作，并取得了良好的效果。

简短介绍here

后来编辑：似乎已迁移到jsRender

后来，后来编辑：另一种轻量级的JavaScript，只是在这里的版本：或JavaScript template engine in just 20 lines