[英]How to update content in HTML by generating data from array objects in JavaScript?
[英]Content in JavaScript from an array of objects
我是JavaScript新手,我想这样做:我有一个带对象的数组(一个对象有标题,封面,作者和评级),我想用这些对象填充div,每个对象一个div。 但我不知道如何在不为每个div创建新元素(h1,p,img)的情况下这样做。 这是我的第一次尝试:
// Display the books var container = document.getElementById('books-container'); function displayBooks(arr) { arr.forEach(function(item) { var bookRow = document.createElement('div'); bookRow.className = "row"; container.appendChild(bookRow); var imgColumn = document.createElement('div'); imgColumn.className = "large-4 columns"; bookRow.appendChild(imgColumn); var imgBook = document.createElement('img'); imgBook.className = "book-img"; imgColumn.appendChild(imgBook); var bookColumn = document.createElement('div'); bookColumn.className = "large-8 columns"; bookRow.appendChild(bookColumn); var title = document.createElement('h3'); title.innerText = item.title; bookColumn.appendChild(title); var author = document.createElement('p'); author.innerText = item.author; bookColumn.appendChild(author); var rating = document.createElement('p'); rating.innerText = item.rating; bookColumn.appendChild(rating); var input = document.createElement('input'); input.type = "checkbox"; input.className = "checked"; bookColumn.appendChild(input); var wishBtn = document.createElement('button'); wishBtn.innerText = "Add to wishlist"; bookColumn.appendChild(wishBtn); var hr = document.createElement('hr'); bookRow.appendChild(hr); }); }; displayBooks(books);
但我认为有一种更简单的方法。
我不能使用任何库。 这是一个家庭作业,我只能使用JavaScript本身提供的功能和对象。
这就是Handlebars等类似的模板引擎非常方便:您可以定义一个具有您想要的模板,然后让引擎使用对象作为基础来渲染模板。
例如,使用把手你可以做这样的事情(从他们的网站无耻地复制):
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
然后在你的代码中:
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
arr.forEach(function(item) {
container.insertAdjacentHTML("beforeend", template(item));
});
下一版本的JavaScript“ES6”将使用模板字符串作为语言的一部分。
你已(间接)在评论中说过你不能使用Handlebars。 这个函数很乐意使用${name}
形式的占位符字符串,并用相关的对象属性替换所有出现的占位符。 它将无法替换任何未由对象属性表示的标记:
function cheapTemplateEval(str, obj) {
Object.keys(obj).forEach(function(name) {
str = str.replace(RegExp("\\$\\{" + name + "\\}", "g"), obj[name]);
});
return str;
}
请注意 ,这假设对象上的属性名称仅包含在正则表达式中不特殊的字符。
实例:
function cheapTemplateEval(str, obj) { Object.keys(obj).forEach(function(name) { str = str.replace(RegExp("\\\\$\\\\{" + name + "\\\\}", "g"), obj[name]); }); return str; } var str = "<p>Hi ${name}, I'm a really ${adjectives} template!</p>"; document.body.insertAdjacentHTML( "beforeend", cheapTemplateEval(str, { name: "Joe", adjectives: "nifty and simple" }) );
我会通过添加原始HTML来实现这一点。 它可能有点难看,但它比在这种情况下逐个元素更清晰。
var container = document.getElementById('container')
var books = [
{title: 'Catch-22',
author: 'Joseph Heller'
},
{title: 'The Road',
author: 'Cormac McCarthy'
}
];
function bookItem(item) {
return "<h1>" + item.title + "</h1><p>" + item.author + "</p><br />"
}
books.forEach(function(book) {
var new_div = document.createElement('div')
new_div.innerHTML = bookItem(book)
container.appendChild(new_div)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.