Ember - 如何将数据向下发送到组件？

Question

我正在构建一个 Ember 应用程序，它需要在表单输入成为焦点时淡出背景 DIV。

我已经在我的应用程序路由上定义了操作，并在我的模型中设置了一个属性（因为我试图在没有控制器的情况下执行此操作，例如 Ember 2.0 方式）。我正在尝试执行 Action Up，Data Down。我有上行到应用程序路由的操作，但数据并没有返回到组件。

我的操作冒泡到应用程序路由就好了，但是当我更新属性 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}}

这是用路由替换 "properties" 和控制器的正确方法吗？我能找到的所有 "move to Ember 2.0" 建议都没有提到如何替换高级属性。

编辑我创建了一个 JSbin，但我不确定它是否针对 2.0 样式（无控制器）正确设置，因为 import/export（ES6？）东西在 JSbin 上不起作用。

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

我实际上无法正确执行任何冒泡操作。

Answer 1

Here is the working demo.

您提供的 jsbin 中存在多个问题。这是我修复的一些问题。

你需要指定路由，App命名空间上的组件，否则Ember将无法找到它。 ember-cli 中使用的解析器是自定义的。

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.

不需要在路由中指定setupController方法。默认情况下，模型挂钩返回的模型设置为控制器的模型属性。

https://github.com/emberjs/ember.js/blob/v1.11.1/packages/ember-routing/lib/system/route.js#L1543
ObjectController 的代理行为以及 ObjectController 已被弃用。

现在通过添加 model.+modelPropertyName 引用模型属性 You can read more about this in the deprecation page for v1.11
action应该是actions

Ember - 如何将数据向下发送到组件？

Ember - How to send data down to a component?

components

ember.js

ember-router