如何将附加组件的状态属性公开给开发人员？

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')
    }
}

我可以像这样从 ember 项目中调用它：

<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

你已经非常接近了，但你的消费模板需要设置得有点不同

{{#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}}

Answer 2

你的问题是你从 ui-button-yield yield 但你在 ui-button.

中定义了 isRunning 和 disabled

如果你真的想使用这个包装上下文组件，那么你需要将你的逻辑移到它上面。

如何将附加组件的状态属性公开给开发人员？

How do I expose state properties from my add on component to the developer?

ember.js