Как открыть свойства состояния из моего надстройки для разработчика?

Sorvah спросил: 11 марта 2019 в 07:30 в: ember.js

В настоящее время я экспериментирую с созданием надстроек в Ember 3.8 и немного застрял в том, как предоставить свойства состояния разработчику. У меня есть простая кнопка в моем аддоне:

//ui-button/component.jsimport 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.

0 ответов