使用jQuery將數據綁定到html

我有一個html模板和一個json對象，我試圖綁定到這個模板。使用jQuery將數據綁定到html

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，並從源代碼中讀取它，最終填充模板中的相關字段。例如，發現圖像的數據字段需要field2，從源讀取其值，並將該值插入到src中。

來源

2015-11-06 Nihar Sarangi

我建議你試試mustache.js，否則，你只能重新發明。讓我知道你是否需要一些幫助來開始踢球。 – Vivek

Working Fiddle

可以遍歷你的對象，並更換key（字段1，字段2 ...）在由相關value模板來此鍵（值1，值2 ...）：

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

希望這有助於;

來源

2015-11-06 16:36:21

感謝您的回答。這會替換'data-field'的值一次。我對模板做了輕微的改變，使其工作（通過廢除數據字段並使用像''和'template.replace（'{'+ key +'}'，val）' 這樣的結構。但是，它取代因此，如果模板中有多個字段需要相同的數據，則它們不會被替換。 –

歡迎您和好的工作，以取代所有發生的嘗試使用'template = template.split （'{'+ key +'}'）。join（val）;'而是查看我更新後的答案。 –

你可以在你的data-field遍歷每個數組元素source

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)

來源

2015-11-06 16:43:53 Jaco

嘗試使用.map()，.attr()

template = $(template); 

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

的jsfiddle https://jsfiddle.net/zg82ftuc/1/

來源

2015-11-06 17:04:39 guest271314

使用jQuery將數據綁定到html

回答

相關問題