JavaScript模板系统

-1

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

目前我建的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或沿着他们的线条，这就像保持它基于对象，而不是搜索字符串或类似的东西。

来源

2016-08-01 Martyn Ball

车把胡子是你在找什么 – Borjante

为什么不用html ...建立html ...疯狂的我知道。模板库会更好，但是html比你所拥有的更好...... –

看看[Jinja2]（http://jinja.pocoo.org/）模板引擎。它非常易于使用，并且完美适用于这类事情。 – ManoDestra

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

简短介绍here

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

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

来源

2016-08-01 14:18:42 evilpenguin

感谢你们，由于我的意图，我无法真正开始建立另一个大型图书馆，有没有一种方法可以建议我可以做我自己的基本版本？ –

更新了答案 – evilpenguin

我真的很喜欢最后一个链接。但是，它可能会有所改变。添加''使用严格';'是一个非常好的主意。另外，如果可能的话，使用'with'而不是总是使用'this。 '。 –

JavaScript模板系统

回答

相关问题