如何创建与模板的文字里多次数据的行?

问题描述 投票:0回答:1

我创建香草的JavaScript日历,使用ES6功能。

我有一个神奇的功能的createElement通过调用类的渲染方法,然后解析字符串节点单元。

现在,我已经创建了一天组件和行组件。

我导入日行里面,我需要做的是显示日历行这几天里面,所以在总应该显示4-5rows,用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将它只是其附加或添加一个变量,但如何把这个这种方式下产生的呢?

javascript ecmascript-6
1个回答
1
投票

要使用模板文字,你必须使用反单引号``(以下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;
}
© www.soinside.com 2019 - 2024. All rights reserved.