在Ember模板中呈现{{content}}的问题

时间:2013-12-07 13:26:14

标签: javascript ember.js handlebars.js

我使用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 ..
];

如果我在模板中有itemController="note",那么它不会渲染模型的{{content}},而是呈现如下内容:<YeoApp.Note:ember352:6>(YeoApp是应用名称)。 {{title}}已正确呈现! 如果我从hbs文件中删除itemController,那么将呈现模型的内容,但如果我点击它们,则不会在控制器中调用editNote和deleteNote动作。

当然我可以重命名内容属性,但我想我在某个地方犯了一个错误。 我该怎么做才能正确呈现{{content}}?

在此先感谢,感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

内容和模型是模板中的同义词,使用model.content或类似的东西

{{#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}}