我正在使用ES6功能在Vanilla JavaScript中创建日历。
通过调用类render方法,然后将字符串解析为节点元素,我有一个createElement的魔术函数。
现在,我创建了一个day组件和一个row组件。
我正在将日期导入行中,而我需要做的是在其中显示天的日历行,因此总共应该显示4-5行,其中28-31天在行内划分。
像这样:
renderDays() {
// Weeks
for(var j = 0; j < 5; j++) {
const row = day % 7 == 0;
var html
html += ' ${row ? "<div class="cal__cell-row">" : " "} ';
// Days
for (var i = 0; i < 28; i++) {
createElement(day);
}
html += ' ${row ? "</div>" : " "} '
}
}
然后在我的渲染中
render() {
return /*html*/`
<div data-child="row" class="cal__cell-row">
${this.renderDays()}
</div>
`;
}
我该如何进行这项工作?在ES5中,它只是将其追加或添加到变量中,但是应该如何以这种方式创建它呢?
最佳答案
要使用模板文字,您必须使用反引号``(Esc键下方的一个)
您使用的是引号,它并没有像您期望的那样使用${}
。
如果要遵循问题中提到的Es6惯例,也可以使用let
代替var
。
renderDays() {
let html = ''; // consider scoping the variables correctly
// Weeks
for(let j = 0; j < 5; j++) {
const row = day % 7 == 0;
html += ` ${row ? '<div class="cal__cell-row">' : ' '} `;
// Days --- potentially incorrect logic as you are looping inside each row 28 times, or 5*28 times in total ?
for (let i = 0; i < 28; i++) {
createElement(day); // possibly you mean html+= createElement(day) ?
}
html += ` ${row ? '</div>' : ' '} `
}
// console.log(html)
return html;
}
关于javascript - 如何使用模板文字多次创建包含数据的行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54603597/