JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars">
{{view App.BrokenView}}
<hr>
{{view App.FixedView}}
<hr>
{{view App.WorksTooView}}
</script>
<script type="text/x-handlebars" data-template-name="appointment-cell-broken">
<td colspan="1">
<span class="reserved">
{{text}}
</span>
</td>
</script>
<script type="text/x-handlebars" data-template-name="appointment-cell-fixed">
<table><tbody><tr><td>
<span class="reserved">
{{text}}
</span></td></tr></tbody>
</table>
</script>
<script type="text/x-handlebars" data-template-name="appointment-cell-works-too">
<span class="okayHere">
<span class="reserved">
{{text}}
</span>
</span>
</script>
JavaScript
App = Ember.Application.create();
App.BrokenView = Ember.View.extend({
templateName: 'appointment-cell-broken',
text: 'This one is broken'
});
App.FixedView = Ember.View.extend({
templateName: 'appointment-cell-fixed',
text: 'This one has correct markup in the template :)'
});
App.WorksTooView = Ember.View.extend({
templateName: 'appointment-cell-works-too',
text: 'Because see this works just fine too!'
});