How to prevent ember.js change the structure of the template?

Question

I'm using ember.js 0.9.2 (but this issue also occurs in HEAD revision) and it is changing my template's markup structure. I have a template like this:

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

And my JS code like this:

        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");
            }
        });

But the view is rendered like this:

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

Don't know, but it seems that ember.js is removing my td element. This is the output when I use tagName: 'td' in the view class:

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

It doesn't even render the content! Am I missing something?

Answer 1

It took me awhile to figure this one out...

Your problem is that you do not have properly formatted HTML here so the browser is disregarding the incorrectly formatted markup. Take a look at this jsFiddle and look at the results in your inspector.

If you need any other help please don't hesitate to ask!

P.S. Please use jsFiddle to show your errors. It helps us out :)

Answer 2

To explicitly sum up the lesson I think is being implicitly provided here by the far wiser and more experienced folks: if you're using inline templates, make sure the markup/elements inside of your Ember/handlebars template can be parsed on a standalone basis, and won't be blown-up by the insertion of the Ember <div>. Don't put <table> outside of your template, and your <tr>'s and <td>'s inside. Make sure the whole table is inside, so it can be parsed as a unified whole.

However, if you're using non-inline templates, like so:

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

then you have the option of defining the type of element that Ember will wrap around your template content. In this case above, Ember's winged steed for delivering your template content will be a <td> rather than a <div>, which will parse perfectly nicely inside of your table.