Question

为自定义jQuery UI小部件加载HTML标记的最佳方法是什么？

到目前为止，我已经看到使用字符串（即$(...).wrap('<div></div>')）创建的元素，这对于简单的事情来说很好。但是，这使得以后修改更复杂的元素变得非常困难。

这似乎是一个相当普遍的问题，但我也知道jQuery UI库是新的，可能没有广泛接受的解决方案。有什么想法吗？

Answer 1

一件非常干净的事情就是：

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

这样，您正在创建一个元素，并将其引用存储在变量中，供以后使用。

Answer 2

如果您有大量复杂的HTML，并且不想在JavaScript代码中处理硬编码字符串，则可以将其放在单独的HTML文件中并使用Ajax load function。

它是可链接的，因此您可以加载HTML文件（整个内容或选定的片段），将其注入当前的DOM，并保持正常运行。

Answer 3

对于非常复杂的模板很多次我只是将html块作为字符串存储在JSON对象中以供以后访问...例如：

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

然后在事情发生时再做一些替换。这样，标记与加载数据的逻辑有些分离，因此交换模板等可以更快一点。

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

无论如何，这种方法对我来说非常适用于AJAX小部件以及那种可能会使设计发生根本变化的事情。

Answer 4

一种流行的，有效的方法是在脚本标记中将所有额外标记（以后可能需要）输出到页面底部，以便浏览器不呈现标记。

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

然后你可以使用jQuery来获取你的标记......

var markup = $('#template-example').html();

使用模板引擎解析我扔在那里的JS示例，例如Underscore.js（我推荐）中的那个，或者这个答案中的jQuery之一：jQuery templating engines

玩得开心！

jQuery UI：加载HTML标记的最佳方式？

4 个答案: