在模板中插入視圖在ember.js

Question

你好，我在跟隨「讓我學習餘燼」由何塞莫塔在保費溢價。我陷入了一個非常奇怪的境地。

我在系列的第9個視頻中，我正在學習創建列表視圖項目並在應用程序模板中插入該視圖。我完全按照作者在視頻中所做的操作，但結果並未顯示在屏幕上。但在控制檯中，obejct已成功添加。

我正在創建一個Flash消息視圖，每當用戶添加特定消息時，Flash消息應該在屏幕頂部顯示淡入淡出效果。

我基本上有一個處理淡入淡出和消息的警告視圖，App.flashController控制器繼而從App.FlashController擴展，它擴展了Ember.ArrayController和App.FlashListView視圖。

這裏是我的代碼

flash.js控制器

App.FlashController = Ember.ArrayController.extend(); 

App.flashController = App.FlashController.create({content: Ember.A()}); 

FlashListView代碼：

App.FlashListView = Ember.CollectionView.extend({ 
itemViewClass: "App.AlertView" 
, contentBindings: "App.flashController" 
}); 

警報視圖代碼

App.AlertView = Ember.View.extend({ 
templateName: "_alert" 
, tagName: "div" 
, classNameBindings: ["defaultClass", "kind"] 
, defaultClass: "alert-box" 
, kind: null 

, click: function(){ 
    this.$().fadeOut(300, function(){ this.remove();}); 
} 
, didInsertElement: function(){ 
    this.$().hide().fadeIn(300); 
} 
}); 

這裏的加載順序文件

<script src="js/app.js"></script> 
    <script src="js/route/route.js"></script> 
    <script src="js/controllers/bookmarks_controller.js"></script> 
    <script src="js/controllers/bookmark_controller.js"></script> 
    <script src="js/views/alert.js"></script> 
    <script src="js/views/flash_list.js"></script> 
    <script src="js/controllers/flash.js"></script> 

而這正是閃光燈消息應顯示

<script type="text/x-handlebars" data-template-name="application"> 
     <div> 
      <nav class="top-bar" data-options="is_hover:true"> 
       <ul class="title-area"> 
        <li class="name"> 
         <h1><a href="#">My Ember Site </a></h1> 
        </li> 
       </ul> 

       <section class="top-bar-section"> 
        <ul class="right"> 
         <li class="name">{{#linkTo "index"}}Home{{/linkTo}}</li> 
         <li>{{#linkTo "about"}}About{{/linkTo}}</li> 
         <li>{{#linkTo "about.team"}}About Team{{/linkTo}}</li> 
         <li>{{#linkTo "about.kshitiz"}}About Kshitiz{{/linkTo}}</li> 
         <li>{{#linkTo "bookmarks"}}Bookmarks{{/linkTo}}</li> 
        </ul> 
       </section> 
      </nav> 
     </div> 

     <div class="container"> 
      <div class="row"> 
       {{outlet}} 
       {{view App.FlashListView}} 
      </div> 
     </div> 
    </script> 

_alert模板代碼：

<script type="text/x-handlebars" data-template-name="_alert"> 
     {{view.content.message}} 
    </script> 

在瀏覽器中，當我寫這篇文章的命令

應用。 flashController.pushObject（Ember.Object.create（{消息：「他LLO「}））

類返回

類{消息： 」你好！「，構造：函數的toString：功能， 重新打開：功能，初始化：函數...}

但它並沒有在教程中顯示在屏幕上。

我不知道出了什麼問題，我對這個ember.js世界是全新的。

Answer 1

有在App.FlashListView可能的錯字，應該是單數contentBinding不是複數contentBindings

App.FlashListView = Ember.CollectionView.extend({ 
    itemViewClass: "App.AlertView" 
, contentBinding: "App.flashController" 
});