Fixture properties dissapearing in <td>

Ember Data
1

I ran into the most weird thing ever… I try to explain what is happening right in front of me:

Situation: So, I have this model called Topic (extends DS.Model), which is relational to another model called Category (extends DS.Model as well). Category inherits Topic as a one-to-many relationshop (a category has several topics). For testing purposes I use the fixture adapter to load some static fixtures into the model, which looks as follows:

App.Topic = DS.Model.extend({
    title: DS.attr(),
    author: DS.attr(),
    dateCreated: DS.attr(),
    dateEdited: DS.attr(),
    category: DS.belongsTo('category', {async: true}),
    messages: DS.hasMany('message', {async: true})
});

 App.Topic.FIXTURES = [
    {
        id: 0,
        title: "Hello, world!",
        messages: [0],
        author: 'Klaas Vaak',
        dateCreated: "2014-08-13",
        dateEdited: "2014-08-13"
    },
    {
        id: 1,
        title: "Another awesome topic",
        messages: [1],
        author: 'Skrillex',
        dateCreated: "2014-08-13",
        dateEdited: "2014-08-13"
    }
];

Now this is no rocket science. I connect this to a route which fetches the model category (containing the topics by hasMany) and throw it into my template, which looks as follows (only table, which is created for every category it loops over):

<table class="table">
    <thead>
        <tr>
	<th>Title (n.a?)</th>
	<th>Date Created</th>
	<th>Last edited</th>
	<th>Messages</th>
	<th>Author</th>
	</tr>
	    </thead>
		<tbody>
		    {{#each topics}}
		        <tr>
			    <td>{{title}}</td>
			    <td>{{dateCreated}}</td>
			    <td>{{dateEdited}}</td>
			    <td>n.a</td>
			    <td>{{author}}</td>
			</tr>
		{{/each}}
	</tbody>
</table>

Also, no rocket science on this side. But strange thing is, when this renders, it does not render {{title}} while it renders the rest perfectly without any problem. When I remove the td’s that are wrapping {{title}} it suddenly displays title above the table (because the browser thinks it’s not in the table, silly reason why outputted above the table instead of inside the table) like so:

{{title}} <!-- all of a sudden, it displays the title... -->
<td>{{author}}</td>
<td>{{dateCreated}}</td>
<td>{{dateEdited}}</td>
<td>n.a</td>
<td>{{author}}</td>

I think it must have something to do with the td that is wrapping it, because when I remove them it works. I searched ember js and all over google, but nothing related to strange behavior of Ember rendering td’s popped up. Has anybody of you experienced this? I can’t find any logical reason why this is happening.

What I thought about was that maybe it could have been something with naming conventions, but I see property title being used all over different examples so that probably couldn’t be it. Also, it is rendered.

also, there is no css saying td:firstchild { font-size: 0 } or anything like that, just using plain bootstrap without customizations, so it’s definitely not css-related (chrome inspector says empty as well, only two metamorph tags are inside the td)

I wonder if anything is wrong is wrong with the code, doesn’t seem to me, for as far as I can see, everything is OK inside the model and in the loop. (category model works the same as here with messages, topics are being inserted as DS.hasMany(‘topics’, { async: true }).

Who can help me out with this braincracker? Am I seeing something wrong in this picture?

Thanks guys 'n girls :smile:

Koen.