最小的jQuery模板

我正在創建一個用戶界面，用戶可以在其中添加/刪除項目（類似的佈局）。最小的jQuery模板

它從一個項目開始，你可以點擊'添加'來添加更多。 UI由幾種不同類型的項目組成。

什麼我目前做的是填充單個項目item 1（每類）和add事件，我克隆item 1，代替用戶完成的改變在item 1並追加克隆到container。簡而言之，我不是用jQuery動態創建html，而是克隆了div的html。但是在這種方法中，我不得不改變很多東西來保持新項目的初始狀態。

所以，我想避免更換由用戶完成編輯，所以我想類似下面，

<script type="text/template" id="item_type1"> 
    <div> 
    <div>Box</div> 
    </div> 
</script> 

<script type="text/template" id="item_type2"> 
    <div> 
    <div>Box2</div> 
    </div> 
</script>

而就add事件，我想這樣做$('#item_type1').html()和$('#item_type2')創造新項目。

我知道有像handlebar和mustache這樣複雜的庫，下劃線有自己的模板實現方式。

但我沒有使用任何這些，因此不想僅僅包含它們來複制內容。我不想要任何特別的東西。我沒有傳遞變量。我只是克隆一些標記來反覆使用。

是這種方式插入html在script標籤，去所有的瀏覽器工作？這是一個好方法嗎？

編輯：

及其對WP插件，我以爲JS被打開，否則插件不會反正工作。

來源

2013-03-19 Jashwant

中瞭解本課，他們並不複雜，他們是圖書館，只需嘗試一下。至少你會直接設計你的模板而不是寫自己的引擎！ – 2013-03-19 04:54:54

我只是想複製一些HTML。爲什麼我會爲此使用一個庫？ – Jashwant 2013-03-19 05:15:23

什麼：

你的HTML應該是，例如：

<script type="text/template" id="item_type1"> 
    <div> 
    <h1>Box1</h1> 
    <p> 
    </p> 
    </div> 
</script>

而且你的代碼是：

var templateHtml = $('#item_type1').html(); 

var $item = $(templateHtml); 
$('body').append($item); 
$item.on('click', function() {});

這是一個簡單的方法，將在所有的瀏覽器。

來源

2013-03-19 04:57:11

我不想傳遞一些參數。 – Jashwant 2013-03-19 05:16:33

對不起，固定...沒有參數傳遞！ – 2013-03-19 09:00:09

你沒讀過我的問題。我知道我可以做到這一點。我提到了同樣的問題。我問它是否可以跨瀏覽器使用？（如果您之前已經使用過）或者您有更好的方法。另外，你爲什麼要做'$（tempalteHtml）'？其完全多餘的 – Jashwant 2013-03-19 09:49:14

第1步：創建模板裏面它
第2步的HTML文件：使用jQuery的load()方法，打電話給你的HTML模板成div元素在主HTML文件：

$("#main-div").load("yourtemplate.html")
第3步：驚奇

這是個好主意嗎？這取決於：

如果它是包含應用程序自上具有確定支持的瀏覽器已知的環境，並與同樣堅定的設置（例如，如果JavaScript是對與否），然後是啊，肯定的。爲什麼不？

如果它在每一個瀏覽器中向公衆開放，可能有很多不同的配置，那麼不，這是一個可怕的想法。如果您的用戶沒有啓用JavaScript，那麼您的內容不會顯示。另外，如果你的腳本中有一個腳本中斷了，那麼你就再沒有內容了。您可以從Gawker made this same mistake

來源

2013-03-19 05:01:47 SomeShinyObject

最小的jQuery模板

回答

相關問題