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

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');

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

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