Ember - 如何將數據發送到組件？

Question

我正在構建一個Ember應用程序，它需要在窗體輸入變爲焦點時淡出背景DIV。

我已經在我的應用程序路線上定義了操作，並在我的模型中設置了一個屬性（因爲我試圖在沒有控制器的情況下執行此操作，如Ember 2.0方式）。我正在嘗試執行操作，數據丟失。我有行動應用程序路線，但數據只是沒有回到組件。

我有冒泡到應用程序路線的行爲很好，但是當我更新屬性this.controllerFor('application').set('showBackground', true);它永遠不會讓它回到組件。

我在我的網站的每條路線上都有這種淡出的背景圖像，所以將所有操作移動到每條路線看起來像很多代碼重複。

我在做什麼錯？

// Application route.js 
var ApplicationRoute = Ember.Route.extend({ 

    model: function() { 
     return Ember.RSVP.hash({ 
      showBackground: false 
     });  
    }, 

    setupController: function(controller, models) { 
     controller.setProperties(models); 
    }, 

    action: { 
     showBackground: function(){ 
      // This runs fine 
      this.controllerFor('application').set('showBackground', true); 
     }, 

     hideBackground: function(){ 
      // This runs fine   
      this.controllerFor('application').set('showBackground', false);  
     } 
    } 

}); 

// Background component.js 
var BackgroundImage = Ember.Component.extend({ 

    // This never runs for some reason!? 
    controlImage: function(){ 
     if(this.get('showBackground')) { 
      // Open menu! 
      console.log('show image'); 
     } else { 
      // Close menu! 
      console.log('hide image'); 
     } 
    }.observes('showBackground') 

}); 

// Login template.hbs 
{{background-image showBackground=showBackground}} 

這是用路線代替「屬性」和控制器的正確方法嗎？所有「轉向Ember 2.0」的建議我都沒有提到如何取代高級屬性。

編輯 我創建了一個JSbin，但我不知道這是否是正確設置爲2.0風格（無控制器），作爲導入/導出（ES6？）的東西不能在JSbin工作。

http://emberjs.jsbin.com/wunalohona/1/edit?html,js,console,output

我不能真正得到任何的行動泡正確。

Answer 1

Here is the working demo.

有您所提供的jsbin多個問題。以下是我修復的一些問題。

1. 您需要指定路徑，App名稱空間上的組件或Ember將無法找到它。在ember-cli中使用的解析器是自定義的。

   var ApplicationRoute = Ember.Route.extend({應該是 App.ApplicationRoute = Ember.Route.extend({

   var BackgroundImage = Ember.Component.extend({應該是 App.BackgroundImageComponent = Em.Component.extend({

More about it here.

您不需要在路由中指定setupController方法。默認情況下，從模型鉤子返回的模型設置爲控制器的模型屬性。

https://github.com/emberjs/ember.js/blob/v1.11.1/packages/ember-routing/lib/system/route.js#L1543

ObjectController與ObjectController沿着代理行爲已被棄用。

現在，通過在ApplicationRoute加入model. + modelPropertyName You can read more about this in the deprecation page for v1.11

action參考模型屬性應該是actions