ember.js 根据条件触发动作

Question

如果条件 returns 为真，我想在我的组件 hbs 文件中触发一个操作。例如，如果我的 component.js 文件如下所示：

export default Ember.Component.extend({
  toggleMe: false,
  actions: {
    changeValue() {
      return this.toggleProperty('toggleMe');
    }
  }
});

我想在我的 hbs 文件中调用 changeValue 操作。这是我在 component.hbs 文件中尝试过的方法：

{{#if model.property}}
    {{action changeValue}}
{{/if}}

我遇到错误

"Assertion Failed: Action passed is null or undefined"

Answer 1

您不应在模板文件中调用操作。
有为此计算的属性。
这是一个例子：

import { computed } from '@ember/object';
export default Ember.Component.extend({
  toggleMe: false,
  toggleComputedProperty: computed('toggleMe', function() {^
      return this.toggleProperty('toggleMe');
    }
  }
});

现在您可以在模板或逻辑中使用 toggleComputedProperty。

根据经验：切勿尝试 logic/state 更改模板文件。为此使用计算属性或其他功能。

Answer 2

首先，您在组件 hbs 中有一个拼写错误的语法。它应该以 {{.

开头

其次，您的要求可以通过使用 Ember observer 来完成。

创建了一个 live ember twiddle 供您理解。

将您的组件 js 文件修改为，

import Ember from 'ember';

export default Ember.Component.extend({
  toggleMe: false,
  handleProperty : function()
  {
        this.send("changeValue");
  }.observes('modeldata.property').on('didInsertElement'),
  actions: {
    changeValue() {
      //console.log(this.get("toggleMe"));
      this.toggleProperty('toggleMe');
      //console.log(this.get("toggleMe"));
    }
  }
});

您可能还想阅读有关 Ember computed properties and Ember observers 的内容。

Answer 3

该错误是由于您的操作调用期间语法拼写错误造成的。调用它们时，您的操作名称必须使用双引号。

{#if model.property}}
  {{action "changeValue"}}
{{/if}}

我也加了一个twiddle供大家参考。

ember.js 根据条件触发动作

ember.js triggering an action based on conditional

javascript

action

handlebars.js

ember.js