javascript - 将 j/s 变量注入(inject)可重用的 HTML block 而不将两者混合在 j/s 文件中的有效方法是什么？

Question

基本上，我有一个自动完成功能来帮助用户选择一个项目。当他们选择一个项目时，一系列与该项目相关的变量就会被保存。一旦他们单击“添加”，变量就会被注入(inject)到 HTML 模板中，而 HTML 模板又会被注入(inject)到 DOM 中。我的问题是，如何才能做到这一点，而不必将 HTML 代码与 j/s 代码混合，即 var example = "<div id='" + divId + "'></div>"; (等等)我希望问题足够清楚。

Answer 1

您查看过jQuery Templates吗？ ？它基本上是客户端数据绑定(bind)，这似乎是您想要做的。

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

假设您有一个 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'));