内容在 Ember 视图中未正确显示
Content not showing properly in Ember view
我是 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')
});
问题解决了。
相关文章:
- [AngularJS][UI Router]在视图中显示视图
- 可以't无法显示视图/集合
- 在 Angular JS 中显示视图上的数组
- 如何在主干中显示视图.js(路由器.js中不显示警报)
- Angular 在加载其他视图之前不显示视图
- 如何将自动完成搜索框重定向到显示视图
- 使用 Knockoutjs 显示视图模型中数据的更好方法
- Angular UI路由器未显示视图
- 无法在“角度”中显示视图
- 在新窗口中显示视图
- 显示视图时JavaScripts不工作-Rails 4 Ruby 2
- 如何在单击按钮时显示视图
- AngularJS$routeProvider未显示视图
- 将创建视图嵌套在Backbone.js中的显示视图中
- 烬不显示视图
- MVC应用程序不显示视图中的数据
- 主干路由器不能显示视图
- 流星js |通过帮助器显示视图中的Json
- 如何在HTML或css中禁用选中的突出显示视图
- 我如何嵌入街景图像,使其显示视图从街道(而不是从建筑物内部)