Question

我正在使用ember.js 0.9.2（但这个问题也出现在HEAD修订版中）并且它正在改变我的模板的标记结构。我有这样的模板：

    <script type="text/x-handlebars" data-template-name="appointment-cell">
            <td colspan="1">
                <span class="reserved">
                    {{text}} 
                </span>
            </td>
    </script>

我的JS代码是这样的：

        var AppointmentCellView = Ember.View.extend({
            templateName: 'appointment-cell',
            text: 'Some name',
        });
        window.App = Ember.Application.create({
            init: function(){
                this._super();
                AppointmentCellView.create().appendTo("#the_tr");
            }
        });

但视图的呈现方式如下：

<div id="ember142" class="ember-view">
    <span class="reserved">
        Some name 
    </span>
 </div>

不知道，但似乎ember.js正在删除我的td元素。这是我在视图类中使用tagName: 'td'时的输出：

 <td id="ember142" class="ember-view"></td>

它甚至不呈现内容！我错过了什么吗？

Answer 1

花了我一段时间才想出这个......

您的问题是您在此处没有格式正确的HTML，因此浏览器忽略了格式不正确的标记。请查看this jsFiddle并查看检查员中的results。

如果您需要任何其他帮助，请不要犹豫！

P.S。请使用jsFiddle显示您的错误。它帮助我们：）

Answer 2

明确地总结一下我认为这一课程是由更聪明，更有经验的人隐含提供的：如果您使用内联模板，请确保您的Ember /车把模板内的标记/元素可以是在独立的基础上解析，并且不会因插入Ember <div>而被炸毁。不要将<table>放在模板之外，而将<tr>和<td>放在里面。确保整个表都在内部，因此可以将其解析为统一的整体。

但是，如果您正在使用非内联模板，请执行以下操作：

var AppointmentCellView = Ember.View.extend({
    templateName: 'appointment-cell',
    text: 'The Text',
    tagName: 'td',
    attributeBindings: ['colspan'],
    colspan: 1
});

然后您可以选择定义Ember将围绕模板内容的元素类型。在上面的这种情况下，Ember的用于传递模板内容的翼楔将是<td>而不是<div>，它将在您的桌子内完美地解析。

如何防止ember.js改变模板的结构？

2 个答案: