Question

基本上，我有一个自动完成功能来帮助用户选择一个项目。当他们选择一个项目时，会保存与该项目相关的一系列变量。一旦他们点击“添加”，然后将变量注入HTML模板，并将HTML模板注入DOM。我的问题是，如何在不必将我的HTML代码与j / s代码混合的情况下执行此操作，即var example = "<div id='" + divId + "'></div>";（等）我希望问题足够清楚。

Answer 1

你有没有看过jQuery Templates？它基本上是客户端数据绑定，看起来就像你想要做的那样。

例如，你可以做这样的事情..

假设您有一个Song对象列表，定义为：

var song = {
  title : 'Purple Rain',
  artist : 'Prince'
};

HTML：

<!-- Template definition -->
<script id="tmpl_songList" type="text/html">
  <li>
    <a>
        <span>${title}</span>
        <span>${artist}</span>
    </a>
  </li>
</script>

<!-- HTML container to host data-bound list -->
<ul id="song_list"></ul>

JS：

// bind data (songList) and append to HTML container.
$.tmpl($('#tmpl_songList'), songList).appendTo($('#song_list'));

Answer 2

你可以这样做：

var example = $("<div />").attr("id",divId);

但是当你有很多嵌套标签时，创建每个元素可能会很繁琐，在这种情况下我会把它们混合起来。

Answer 3

尝试：

var myID = "id";
var myText = "Some Text"
$('<div/>', {
    id: myID,
    html: myText
  }).appendTo('body');

如果需要，您可以添加更多属性。

另一方面，如果您的操作很复杂，请使用模板引擎。它更容易维护。

将j / s变量注入可重用的HTML块而不将它们混合在j / s文件中的有效方法是什么？

3 个答案: