使用 jQuery 加载和填充模板答案

【问题标题】：Load and fill templates with jQuery使用 jQuery 加载和填充模板
【发布时间】：2013-09-26 06:30:53
【问题描述】：

我有一个内容不断变化的网站。我想为元素列表加载模板。元素的数据由 ajax 调用独立收集。我的模板是标准的 html。我希望能够仅将模板加载到 js-memory 中一次，并将其重用于所有重复它的元素，并使用 $(..).append(my new list-elemnt) 将其附加到我的列表中。

我想出了如何使用 .load() 加载文件，但我没有设法重用数据并将数据填充到模板中。将其转换为 jQuery-Object 是我的问题之一。我也不知道最好的做法是什么。

总而言之，我想： 1. 从服务器加载模板（文本/html）一次 2. 多次重复使用，从独立收集的列表中填充数据 3. 使用 $(my element).append() 将其附加到 DOM 中的现有元素

非常欢迎任何标准的 jQuery 方式或更好的解决方案。我想避免为此添加另一个库/依赖项。

非常欢迎作为 jsfiddles 的示例。

【问题讨论】：

标签： jquery templates

【解决方案1】：

您可以通过 get 请求获取 HTML 文件并将其解析为 DOM 元素。此 DOM 元素可用作自定义数据的模板。
可以使用 Jquery traversing 和 manipulation 方法。在我的示例中，您可以看到我使用 find() 方法通过其数据属性获取元素。然后我用text()方法修改了文本。
最后，您将 DOM 模板附加到我的 HTML 主页面。

模板.html

<div class="card">
   <h1 data-name="firstName"></h1>
   <h2 data-name="lastName"></h2>
   <p data-name="profession"></p>
</div>

加载动态数据.js

let users = [
  {
    firstName: 'Foo',
    lastName: 'Foome',
    age: 55
  },
  {
    firstName: 'Foo',
    lastName: 'Foome',
    age: 55
  }
];

$.get('html/template.html', function(data) {
    users.forEach(element => {
        let template = $.parseHTML(data);
        for (const key in element) {
            $(Template)
                .find('[data-name=' + key + ']')
                .text(element[key]);
        }
        $('div#content').append(template);
    });
});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。您可以使用edit 按钮改进此答案以获得更多选票和声誉！
我自己定制的，希望现在更容易理解了。

【解决方案2】：

我的解决方案是：

使用数据属性标记模板中的字段
加载模板并使用.clone() 克隆它
编写了一个使用 JSON 响应的函数，包括数据属性名称和值，通过使用键和值执行 foreach 来设置，其中键是 jQuery 选择器的值，如下所示：

$('*[data-name='+myKey+']').val(myValue);

【讨论】：

可以把你的js函数放在这里吗？我在这里看到的问题是 $('*[data-name='+myKey+']') 选择器也应该选择已经存在的对象

【解决方案3】：

<template id="template">
<p><a class="a_card_tit"</a></p>
</template>

<div id="titles"></div>


<script>
function fillTitleTemplate(title){
  template = $('#template');
  var node = template.prop('content');
  var name = $(node).find('.a_card_tit');
  name.text(title);
  $('#titles').append(template.html());
}
</script>

您可以在哪里接收来自 POST 调用的标题

【讨论】：