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

Problems rendering {{content}} in Ember Template

本文关键字:Ember 问题 content      更新时间:2024-04-13

我在使用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}}?

提前感谢,如有帮助,不胜感激。

content和model是模板中的同义词,请使用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}}