Problems rendering {{content}} in Ember Template

Question

i have a problem using ember 1.1.2.

notes.hbs

<ul class="note-list">
{{#each itemController="note"}}
    <li class="note">
        <div class="note__inner note__inner--edit">
            <a href="#" {{action editNote}}><img src="images/pencil-icon.svg" /></a>
            <a href="#" {{action deleteNote}}><img src="images/trash-can-icon.svg" /></a>
        </div>
        <div class="note__inner note__inner--content">
            <h3>{{title}}</h3>
            {{content}}
        </div>
    </li>
{{/each}}
</ul>

router.js

YeoApp.Router.map(function () {
    this.resource("notes", { path: "/" } );
});

YeoApp.NotesRoute = Ember.Route.extend({
    model: function() {
        return this.store.find("note");
    }
});

note_controller.js

YeoApp.NoteController = Ember.ObjectController.extend({
    actions: {
        editNote: function() {
            console.log("edit note called");
        },
        deleteNote: function() {
            var note = this.get('model');
            console.log(note);
            note.deleteRecord();
            note.save();
        }
    }
});

store.js

YeoApp.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter.extend()
});

model_note.js

YeoApp.Note = DS.Model.extend({
    title: DS.attr("string"),
    content: DS.attr("string")
});

YeoApp.Note.FIXTURES = [
    {
        id: 1,
        title: "red title",
        content: "red content here"
    },
    // .. snip ..
];

If i have itemController="note" in the template then instead of rendering {{content}} of the model it renders something like this: <YeoApp.Note:ember352:6> (YeoApp is the app name). The {{title}} is properly rendered! If i remove the itemController from the hbs-file then the content of the model is rendered, but the editNote and deleteNote actions aren't called in the controller if i click on them.

Of course i could rename the content-property, but i think i have made a mistake somewhere. What have i do to render {{content}} properly?

Thanks in advance, any help is appreciated.

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-07T16:56:55

content and model are synonyms in the template, use model.content or something like this

{{#each item in controller itemController="note"}}
    <li class="note">
        <div class="note__inner note__inner--edit">
            <a href="#" {{action editNote}}><img src="images/pencil-icon.svg" /></a>
            <a href="#" {{action deleteNote}}><img src="images/trash-can-icon.svg" /></a>
        </div>
        <div class="note__inner note__inner--content">
            <h3>{{item.title}}</h3>
            {{item.model.content}}
        </div>
    </li>
{{/each}}

Problems rendering {{content}} in Ember Template

1 Answers