如何防止ember.js改變模板的結構？

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，因此瀏覽器忽略了格式不正確的標記。 看看這個jsFiddle並查看檢查器中的結果 。

如果您需要任何其他幫助，請不要猶豫！

PS請使用jsFiddle顯示您的錯誤。 它幫助我們:)

Answer 2

為了明確總結我認為這一課程由更聰明，更有經驗的人隱含提供：如果你使用內聯模板，請確保你的Ember / handlebars模板內的標記/元素可以單獨解析，並且不會因插入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> ，它將在您的桌子內完美地解析。