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

Question

我在使用车把和html表时遇到了一些问题：

{ 
  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上有效 。

使用模板时，它可以很好地用于列表和普通表，但是当我尝试使用表标题和数据时，它只显示：[object Object]。 代码在： jsfidde

Answer 1

问题是您正在尝试使用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标记。

Answer 2

这是因为您只是在转储单个工作日对象，而不是命名属性。

您将需要更改以下内容：

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

像这样：

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

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