1

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

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

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

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

非常欢迎作为 jsfiddles 的示例。

4

3 回答 3

1
  1. 您可以通过 get 请求获取 HTML 文件并将其解析为 DOM 元素。此 DOM 元素可用作自定义数据的模板。
  2. 可以使用 Jquery遍历和 操作方法修改 DOM '模板'。在我的示例中，您可以看到我使用find()方法通过其数据属性获取元素。然后我用text()方法修改了文本。
  3. 最后，您将 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);
    });
});
于 2019-09-02T16:06:39.700 回答
0

我的解决方案是：

  1. 用数据属性在我的模板中标记字段
  2. 加载模板并使用.clone()克隆它
  3. 编写了一个使用 JSON 响应的函数，包括数据属性名称和值，通过使用键和值执行 foreach 来设置，其中键是 jQuery 选择器的值，如下所示：
$('*[data-name='+myKey+']').val(myValue);
于 2013-12-17T17:08:42.060 回答
0 
<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 调用中接收标题的位置

于 2019-02-18T11:23:44.277 回答