Question

我目前正在尝试在Ember 3.8中创建加载项，并且对如何向开发人员公开状态属性有些困惑。我的插件中有一个简单的按钮：

//ui-button/component.js

import Component from '@ember/component';
import layout from './template';
import { oneWay } from '@ember/object/computed'

export default Component.extend({
  layout,
  tagName: '',

  type: 'button',
  task: null,

  isRunning: oneWay('task.isRunning'),

  disabled: oneWay('task.isRunning'),

  onClick(){},

  actions: {

    click(){
      event if 'type' = submit)
      event.preventDefault();

      let task = this.task;

      let onClick = this.onClick;

      task ? task.perform() : onClick();
    }
  }

});

//ui-button/template.hbs

<button onclick={{action "click"}} disabled={{disabled}} type={{type}}> 
  {{yield}} {{if disabled "..."}}
</button>

任务和动作仅存在于application controller上：

buttonTask: task(function*() {
    yield timeout(2000)
    yield alert("Clicked after 2 seconds")
}),

actions: {
    clicker() {
        alert('clicked')
    }
}

我可以从这样的余烬项目中调用它：

<UiButton @onClick={{action "clicker"}}>
  Angle Bracket
</UiButton>

<UiButton @task={{task buttonTask}}>
  Angle Bracket with task
</UiButton>

它运行良好，但是我希望能够为开发人员提供对disabled或isRunning的访问权限，以便他们可以添加自己的行为。

我试图创建一个产生属性的中间组件：

//ui-button-yield/template.hbs
{{yield (hash
    button=(component "ui-button"
        task=@task)
    isRunning=task.isRunning
    disabled=task.disabled
 )
}}

并这样称呼它：

{{#ui-button-yield as |button|}}
  {{#button.button task=buttonTask}}
    Handlebars Yield {{if button.isRunning "!!!"}}
  {{/button.button}}
{{/ui-button-yield}}

但是尽管按钮可以工作，但我无法从代码块访问disabled或isRunning属性。此外，根据Ember Inspector，这些属性在ui-button-yield组件上不可用，只有ui-button上不可用。

Answer 1

您的问题是您来自yield的{{1}}，但在ui-button-yield中定义了isRunning和disabled。

如果您真的想使用此包装上下文组件，则需要将逻辑移至该组件。

Answer 2

您已经很接近了，但是您需要设置消耗模板

{{#ui-button-yield as |button isRunning disabled|}}
  {{#button.button task=buttonTask}}
    Handlebars Yield {{if isRunning "!!!"}}
  {{/button.button}}
{{/ui-button-yield}}

您可能还需要考虑：

{{#ui-button-yield task=buttonTask as |button isRunning disabled|}}
  {{#button.button}}
    Handlebars Yield {{if isRunning "!!!"}}
  {{/button.button}}
{{/ui-button-yield}}

如何从添加组件向开发人员公开状态属性？

2 个答案: