使用jQuery将数据绑定到html

Binding data to html using jQuery

本文关键字：html 数据绑定 jQuery 使用      更新时间：2023-09-26

我有一个html模板和一个json对象，我正试图将其绑定到此模板。

var template="<li class='"ui-menu-item'">'r'n't<div class='"container'">'r'n't't
              <div class='"content'">'r'n't't't<img src='"'" alt='"'" data-field='"field2'">
              'r'n't't</div>'r'n't't<p data-field='"field1'"></p>'r'n't't<p> 
              <span data-field='"field3'"></span><span data-field='"field4'"></span> 
              </p>'r'n't</div>'r'n</li>";
var source=[{
                field1: "value1",
                field2: "value2",
                field3: "value3",
                field4: "value4",
                extrafieldn: "valuen"
           }];

我不想使用绑定库。是否有某种方法可以迭代模板中的data-field并从源代码中读取它，以最终填充模板中的相关字段。例如，在image的数据字段中发现field2是必需的，从source中读取其值，并将该值插入src中。

工作Fiddle

您可以循环遍历对象，并将模板中的key（field1，field2…）替换为此键（value1，value2…）相关的value：

var template="<li class='"ui-menu-item'">'r'n't<div class='"container'">'r'n't't<div class='"content'">'r'n't't't<img src='"'" alt='"'" data-field='"field2'">'r'n't't</div>'r'n't't<p data-field='"field1'"></p>'r'n't't<p> <span data-field='"field3'"></span><span data-field='"field4'"></span> </p>'r'n't</div>'r'n</li>";
var source=[{
    field1: "value1",
    field2: "value2",
    field3: "value3",
    field4: "value4",
    extrafieldn: "valuen"
}];
$.each(source[0] , function(key, val){
    template = template.split('{'+key+'}').join(val);
});

希望这能有所帮助；

您可以为source 中的每个数组元素迭代data-field

var template = "<li class='"ui-menu-item'">'r'n't<div class='"container'">'r'n't't<div class='"content'">'r'n't't't<img src='"'" alt='"'" data-field='"field2'">'r'n't't</div>'r'n't't<p data-field='"field1'"></p>'r'n't't<p> <span data-field='"field3'"></span><span data-field='"field4'"></span> </p>'r'n't</div>'r'n</li>";
var source=[{
              field1: "value1",
              field2: "value2",
              field3: "value3",
              field4: "value4",
              extrafieldn: "valuen"
              }];
data = source[0]
for (var key in data) {
    if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
        //document.write(key+': '+data[key]); // this will show each key with it's value
        template = template.replace(key,data[key])
    }
}
console.log(template)

尝试使用.map()、.attr()

template = $(template);
template.find("[data-field]").map(function() {
  var field = $(this).attr("data-field");
  $(this).attr("data-field", source[0][field]);
});

jsfiddlehttps://jsfiddle.net/zg82ftuc/1/

相关文章：