提问者:小点点

Ember. js-仅将模板显示转换为使用视图


我刚刚开始使用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}}

使用此代码,布局会呈现,但没有帖子会呈现。看起来控制器的内容属性没有设置,但我不确定我是否可能遗漏了其他内容。任何帮助都将不胜感激。


共1个答案

匿名用户

我想通了。问题在于调用{{view App. PostsView}}。将我的application.handlebar更改回使用{{out}}解决了问题。似乎尝试显式呈现视图会导致问题,并且通过使用正确的命名约定定义视图,Ember会自动拾取它。事后看来,考虑到Ember的方式,这很有意义。