Handlebars.js 和 HTML table 显示 [object Object] 而不是值

Question

车把和 html tables:

我遇到了一些问题

{ 
  weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 

}

            <table>
                <thead>
                    <tr>
                        {{#each weekdays}}
                        <th>{{this}}</th>
                        {{/each}}
                    </tr>        
                </thead>
                <tbody>
                    <tr>
                    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
                    </tr>
                </tbody>
            </table>

此代码适用于 tryhandlebars。

使用模板时，它可以很好地处理列表和纯文本，但是当我尝试使用 table 标题和数据时，它只显示：[object Object]。代码开启：jsfidde

Answer 1

这是因为您只是转储单个工作日对象，而不是指定的属性。

你会想要改变这个：

                        {{#each days}}
                        <td>{{this}}</td>
                        {{/each}}

像这样：

                        {{#each days}}
                        <td>{{this.dayName}}</td>
                        {{/each}}

或对象上的任何属性名称。

Answer 2

问题是您正在尝试使用 html 来生成模板，但是 mustache 语句可能会生成浏览器尝试更正的无效 html。

如果您查看传递给车把的 html，您会得到：

                    {{#each weekdays}}

                    {{/each}}
                <table>
            <thead>
                <tr>
                    <!-- displays [object Object] with <template> tag --><th>{{this}}</th></tr>        
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>

script 标记的内容未以相同方式解析，因此您没有损坏的模板。

通常我建议您使用预编译模板而不是将它们内联到您的 html，但是如果您确实将它们内联到您的 html，您需要使用 script 标签。

Handlebars.js 和 HTML table 显示 [object Object] 而不是值

Handlebars.js and HTML table displays [object Object] instead of values

javascript

handlebars.js