内容在 Ember 视图中未正确显示

Content not showing properly in Ember view

本文关键字:显示 视图 Ember      更新时间:2023-09-26

我是 Ember 的新手,我正在遵循他们的 Todo 教程并制作一个基本的应用程序来创建博客文章,根据我的目的调整他们的代码。该应用程序运行良好,直到我向模板中添加了一个 itemController 和一个控制器来处理isCompleted事件。它不像以前那样显示内容,而是显示:<Posts.Post:ember257:1>似乎是模型名称而不是content。余烬检查器说模型具有正确的属性。它只是无法正确显示。下面是一些代码:

<script type="text/x-handlebars" data-template-name="posts">
    <section id="postapp">
        <section id="main">
            <ul id="post-list">
                // new code added
                {{#each itemController="post"}}
                <li {{bind-attr class="isCompleted:completed"}}>
                    {{input type="checkbox" checked=isCompleted class="toggle"}}
                    <label>{{title}}</label>
                    <p>{{content}}</p>
                </li>
                {{/each}}
            </ul>
        </section>
    </section>
</script>

以及相关的 JavaScript(请参阅PostController底部以查看代码工作后的唯一更改):

Posts.Post = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});
Posts.Post.FIXTURES = [
    {
        id: 1,
        title: "JavaScript: The Dark Side",
        content: "Here is a bunch of information on the dark side of " + 
            "Javascript. Welcome to hell!" 
    },
    {
        id: 2,
        title: "The glory of underscore",
        content: "Here, we're going to talk about the many uses of the " + 
            "underscore library. Read on!"
    },
    {
        id: 3,
        title: "Objectifying Objects",
        content: "Objects are confusing, eh? Let's play around with objects " +
            "a bit to see how to really use them."
    }
];
// This is the only code that changed before the app was functioning properly
Posts.PostController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');
    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

任何关于为什么没有显示正确内容的见解将不胜感激。

我刚刚弄清楚了问题。 content是所有 Ember 控制器的属性,因此当 Ember 渲染页面时,我的帖子内容的变量名称造成了一些混乱。当我将模型中的变量名称和其他位置更改为post_content时,内容在页面中正确呈现。

// template
{{#each itemController="post"}}
    <li {{bind-attr class="isCompleted:completed"}}>
        {{input type="checkbox" checked=isCompleted class="toggle"}}
        <label>{{title}}</label>
        <p>{{post_content}}</p>
    </li>
{{/each}}
//model 
Posts.Post = DS.Model.extend({
    title: DS.attr('string'),
    post_content: DS.attr('string'),
    isCompleted: DS.attr('boolean')
});

问题解决了。