Ember.js-僅轉換模板顯示以使用視圖

Question

我只是從Ember.js開始。 我已經將Ember Data與我的Rails后端通信，並且當前正在使用基本的車把模板顯示數據。 數據正在呈現。 腳本中的當前代碼如下：

模型：

App.Post = DS.Model.extend
  title: DS.attr('string')
  text: DS.attr('string')
  imageUrl: DS.attr('string')

路由：App.Router.map-> @route'posts'，路徑：'/'

App.PostsRoute = Ember.Route.extend
  model: -> App.Post.find()

posts.handlebars：

<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>

application.handlebars

{{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.handlebars

...layout mark up...
 <div id="container">
   {{yield}}
 </div>
...more layout mark up...

posts.handlebars：

<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>

application.handlebars

{{view App.PostsView}}

使用此代碼，布局將呈現，但任何帖子都不會。 似乎未設置控制器的content屬性，但是我不確定是否可能缺少其他內容。 任何幫助，將不勝感激。

Answer 1

我想通了。 問題在於調用{{view App.PostsView}} 。 將我的application.handlebars改回使用{{outlet}}解決了這個問題。 似乎嘗試顯式渲染視圖會導致問題，並且通過使用正確的命名約定定義視圖，Ember會自動將其選中。 在事后看來，考慮到Ember方式，這很有意義。