Question

我的Ember.js应用程序中有自定义视图。它看起来如下：

App.FocusView = Ember.TextField.extend({
  tagName: 'input',

  focusIn: function(){
    console.log("focus in...");
  },
  focusOut: function(){
    console.log(this.value);
    this.get('controller').send('getSalaryLookup', this.value);
  }
});

在我的模板中，我直接渲染视图：

{{view App.FocusView type=number value=pitcherSalary placeholder="enter pitcher salary ..."}}

我的控制器代码已设置为接受getSalaryLookup操作：

App.OptimalController = Ember.Controller.extend({
  actions: {
    getSalaryLookup: function(pitcherSalary){
      console.log("This never hits for some reason..");
    }
  }
});

问题是我从未看到控制器中的消息到达控制台。我以为我正在通过这个事件，但事实并非如此。这里有明显的错误吗？

Answer 1

当你动态地＆＃34;生成控制器时，不会生成控制器。在模板中创建一个视图，它使用视图范围内的控制器（您可以通过在{{log controller}}的同一附近执行{{view ...}}来看到这一点，这将发送控制器实例到控制台）。

但是，在这种情况下，命名并不合适，因为TextField实际上正在扩展一个组件（内心深处是一个视图，但它仍然是一个组件）。从组件中发送操作的方式是，您需要在声明操作时订阅操作，并使用sendAction而不是send的组件订阅操作。

App.FocusItComponent = Ember.TextField.extend({
  tagName: 'input',

  focusIn: function(){
    console.log("focus in...");
  },
  focusOut: function(){
    var value = this.get('value');
    this.sendAction('getSalaryLookup', value);
  }
});

在这里，您可以看到我使用操作名称getSalaryLookup订阅doit操作。当动作从组件发出时，它将首先击中控制器，如果它没有在那里找到动作，它将击中路线，然后向上路线树。 http://emberjs.com/guides/templates/actions/。

您特别订阅的原因是因为您可以1.忽略您不关心组件的操作，2。在同一范围内有多个组件可以执行不同的操作。

{{focus-it type='number' value=pitcherSalary getSalaryLookup='doit' placeholder="enter pitcher salary ..."}}

示例：http://emberjs.jsbin.com/kuxilefu/1/edit

可以在此处理解组件的命名：http://emberjs.com/guides/components/defining-a-component/

如何将事件从Ember.js视图发送到其控制器

1 个答案: