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模板系統

回答

相關問題