Ember - How to send data down to a component?

Question

I'm building an Ember app that needs to fade out a background DIV when a form input becomes focused.

I have defined actions on my Application route, and set a property in my model (because I'm trying to do this without a controller, like the Ember 2.0 way). I'm trying to do Action Up, Data Down. I have the actions going up to the Application route, but the data just isn't making it back down to the component.

I have the actions bubbling up to the application route just fine, but when I update the property this.controllerFor('application').set('showBackground', true); it never makes it back down to the component.

I have this fading out background image on every route of my site, so moving all the actions to each route seems like a lot of code duplication.

What am I doing wrong?

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

Is this the correct way to replace "properties" and controllers with routes? All the "move to Ember 2.0" advice I can find doesn't mention how to replace high level properties.

EDIT I created a JSbin, but I'm not sure if it's setup correctly for the 2.0 style (no controllers), as the import/export (ES6?) stuff doesn't work on JSbin.

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

I couldn't actually get any of the actions to bubble correctly.

Have you defined showBackground on your Application controller? Also, you are passing showBackground in your handlebars ({{background-image showBackground=showBackground}}), but I'm guessing that is passing the reference to the action since that part is working. You may have some naming collisions trying to pass a showBackground property and a reference to a showBackground action: {{background-image showBackground=showBackground showBackground=showBackground}} — Kevin Boucher

blessenm blessenm · Accepted Answer · 2015-05-14T00:00:53

Here is the working demo.

There were multiple issues in the jsbin you provided. Here are some of the issue I fixed.

You need to specify the routes, components on the App namespace or Ember will not be able to find it. The resolver used in ember-cli is custom.

var ApplicationRoute = Ember.Route.extend({ should be App.ApplicationRoute = Ember.Route.extend({

var BackgroundImage = Ember.Component.extend({ should be App.BackgroundImageComponent = Em.Component.extend({

More about it here.

You don't need to specify the setupController method in the route. By default the model returned from the model hook is set to the model property of the controller.

https://github.com/emberjs/ember.js/blob/v1.11.1/packages/ember-routing/lib/system/route.js#L1543
The proxying behavior of ObjectController along with ObjectController has been deprecated.

Now refer model property by adding model.+modelPropertyName You can read more about this in the deprecation page for v1.11
action in the ApplicationRoute should be actions

Ember - How to send data down to a component?

1 Answers