Javascript/Django設計模式

我只是有一個關於如何實現DRY與JavaScript生成html的動態的問題。我有一個動態加載並填充由Django模板一拉Javascript/Django設計模式

{{ tag.title }} 
{% if request.user.is_authenticated %} 
<a name="del-tag" data-id="{{ tag.id }}" class = "tag-x" title="Remove Tag" href="#">x</a> 
{% endif %}

現在元素的列表，我有一些JavaScript代碼也通過AJAX加載新的標籤。這裏的相關部分：

var newTag = "<span class = \"tag\">" + tagName + "<a name=\"del-tag\" data-id=\"" + tag_id + "\"" + 
         "class = \"tag-x\" title=\"Remove Tag\" href=\"#\">x</a></span>"; 
$('#tags').append(newTag);

我可以避免在javascript中重複HTML嗎？

謝謝。

來源

2011-04-06 Eric Conner

jQuery Template可用於此。

來源

2011-04-06 09:10:19 GabiMe

jquery（我假設你正在使用的jquery）有一個clone功能，可以克隆DOM元素。鑑於您應該能夠克隆已存在的一個html元素並更改屬性的值，然後將其附加回DOM。我自己並沒有這樣做，但它理論上應該起作用。

來源

2011-04-06 06:20:06 solartic

但如果沒有元素開頭呢？我將沒有dom元素克隆。 – 2011-04-07 17:32:10

嗯，這是一個有趣的問題。我無法真正想到我喜歡的解決方案，這也是乾的。我現在唯一能想到的就是創建一個定製的Django標籤或小部件，它允許您根據傳遞給它的值生成所需的HTML標籤。然後，您可以渲染一個隱藏的HTML標記，以後可以克隆。我並沒有真正搞亂創建自定義標籤或小部件，所以這都是理論。 – solartic 2011-04-08 05:13:35

是的，你可以這樣做。將所有標籤生成功能都放在單獨的模板中。然後有一些生成標籤的網址。就像這樣：

www.example.com/tags/?tags=tag1,tag2,tag3

這將產生：

然後，做在你的代碼AJAX調用的時候做這樣的事情：

$('div.tags').load('www.example.com/tags/?tags=tag1,tag2,tag3')

在Django的/模板側你會想找到一種方法來將URL返回的結果包含到頁面模板主體中。我不完全確定Django模板引擎提供了什麼工具，但在第一個視圖中，您可以將此代碼放入某個視圖方法，並在需要的任何位置擴展此視圖，並提供模板變量，如下所示，模板爲render(..., tags=self.generate_tags(args))將只是{{ tags }}。

這兩個/tags/?tags=...和普通頁/page/調用可以重新使用generate_tags()方法。

希望它有幫助

來源

2011-04-06 09:29:23 zindel

Javascript/Django設計模式

回答

相關問題