时间戳

首页 > 解决方案 > 如何使用模板 lliteralls 多次创建包含数据的行？

javascript - 如何使用模板 lliteralls 多次创建包含数据的行？

问题描述

我正在使用 ES6 功能在 Vanilla JavaScript 中创建日历。

我有一个神奇的函数，它通过调用类渲染方法来创建元素，然后将字符串解析为节点元素。

现在，我创建了一个日组件和一个行组件。

我正在导入行内的日期，我需要做的是在其中显示日历行，因此总共应该显示 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 中，它只是将它附加或添加到变量中，但是应该如何按照这种方式创建呢？

标签： javascriptecmascript-6

解决方案

要使用模板文字，您必须使用反引号 ``（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;
}

推荐阅读