我刚刚开始使用Ember. js。我已经让Ember Data与我的Rails后端对话,目前正在使用基本的车把模板显示数据。数据正在按应有的方式呈现。coffescript中的当前代码如下:
型号:
App.Post = DS.Model.extend
title: DS.attr('string')
text: DS.attr('string')
imageUrl: DS.attr('string')
路由:App.Router.map-
App.PostsRoute = Ember.Route.extend
model: -> App.Post.find()
帖子.车把:
<div id="masonry-container" class="transitions-enabed infinite-scroll clearfix centered">
{{#each controller}}
<div class="col2 box">
<h3>{{title}}
<img {{bindAttr src="imageUrl"}} >
<p class="text">
{{text}}
</p>
</div>
{{/each}}
</div>
应用程序.车把
{{outlet}}
这个模板将在整个应用程序的几个地方使用。它还使用砖石,需要在内容呈现后初始化,最后我需要实现信息滚动,尽管这有点超前。
现在我想采用上面的方法并为它创建一个视图。到目前为止,我已经尝试了以下方法。
路由:
App.Router.map ->
@route 'posts', path: '/'
App.PostsRoute = Ember.Route.extend
setupController: ->
@controllerFor('posts').set('content'. App.Content.find())
控制器:
App.PostsController = Ember.ArrayController.extend()
查看:
App.PostsView = Ember.View.extend
layoutName: 'appLayout'
templateName: 'posts'
controller: 'App.PostsController'
模板:
app_layout车把
...layout mark up...
<div id="container">
{{yield}}
</div>
...more layout mark up...
帖子.车把:
<div id="masonry-container" class="transitions-enabed infinite-scroll clearfix centered">
{{#each controller.content}}
<div class="col2 box">
<h3>{{title}}
<img {{bindAttr src="imageUrl"}} >
<p class="text">
{{text}}
</p>
</div>
{{/each}}
</div>
应用程序.车把
{{view App.PostsView}}
使用此代码,布局会呈现,但没有帖子会呈现。看起来控制器的内容属性没有设置,但我不确定我是否可能遗漏了其他内容。任何帮助都将不胜感激。
我想通了。问题在于调用{{view App. PostsView}}
。将我的application.handlebar更改回使用{{out}}
解决了问题。似乎尝试显式呈现视图会导致问题,并且通过使用正确的命名约定定义视图,Ember会自动拾取它。事后看来,考虑到Ember的方式,这很有意义。