2

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

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

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

4

4 回答 4

5

这是一件非常整洁的事情：

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

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

于 2008-12-09T22:49:44.760 回答
2

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

它是可链接的，因此您可以加载 HTML 文件（整个文件或选定的片段），将其注入您当前的 DOM，然后继续前进。

于 2009-09-21T22:45:22.777 回答
1

很多时候，对于非常复杂的模板，我只会将 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 小部件和类似的东西，设计可能会彻底改变。

于 2009-09-21T22:19:38.227 回答
0

一种流行的、有效的方法是将所有附加标记（以后可能需要的）输出到页面底部的脚本标记中，这样浏览器就不会呈现标记。

<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 模板引擎

玩得开心！

于 2013-01-27T22:46:33.240 回答