Question

我是Ember的新手，我正在跟随他们的Todo教程并制作一个基本的应用程序来创建博客文章，根据我的目的调整他们的代码。该应用程序正常工作，直到我将itemController添加到模板和控制器来处理isCompleted事件。它不像以前那样显示内容，而是显示：<Posts.Post:ember257:1>，它似乎是模型名称，而不是content。 Ember检查员说模型具有正确的属性。它只是没有正确显示。这是一些代码：

<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')
});

非常感谢任何关于为什么没有显示正确内容的见解。

Answer 1

我刚才发现了问题。 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')
});

问题解决了。

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

1 个答案: