Как изменить свойство контроллера из компонента?

У меня есть свойство в контроллере. Я хочу использовать компонент для обновления этого свойства контроллера. Обычная передача параметров компонента работает, когда я использую текстовое поле, как говорится в руководствах, но в моем случае я изменяю значение в коде, а не в полях ввода. Обвязка, кажется, сломана.

Какой метод, аналогичный propertyDidChange() или notifyPropertyChange(), следует использовать для достижения этой цели? Можете ли вы также привести простой пример, чтобы я знал, ГДЕ сделать вызов этого метода?

контролер личности

`import Ember from 'ember'`

PersonalitiesController = Ember.ArrayController.extend

  eiValue: ->
    if params.name
      params.name.charAt(0)
    else
      'e'

  nsValue: ->
    if params.name
      params.name.charAt(1)
    else
      'n'

  tfValue:  ->
    if params.name
      params.name.charAt(2)
    else
      't'

  pjValue:  ->
    if params.name
      params.name.charAt(3)
    else
      'p'

  type: (->
    this.get('eiValue') + this.get('nsValue') + this.get('tfValue') + this.get('pjValue')
  ).property('eiValue', 'nsValue', 'tfValue', 'pjValue')

  typeChanged: ((model, type)->
    Ember.run.once(this, 'routeToPersonality')
  ).observes('type')

  routeToPersonality: ->
    this.get('controller').transitionToRoute('personality', this.get('type'))

`export default PersonalitiesController`

шаблон личности

%dichotomy-selector type=type

составная часть

`import Ember from 'ember'`

DichotomySelectorComponent = Ember.Component.extend
  eiValue: 'e'
  nsValue: 'n'
  tfValue: 't'
  pjValue: 'p'

  type: (->
    newValue = this.get('eiValue') + this.get('nsValue') + this.get('tfValue') + this.get('pjValue')
    this.set('controller.type', newValue)
  ).property('eiValue', 'nsValue', 'tfValue', 'pjValue')

  actions: 
    toggleEI: ->
      eiValue = this.get('eiValue')
      if eiValue == 'e'
        this.set('eiValue', 'i')
      else if eiValue == 'i'
        this.set('eiValue', 'e')

    toggleNS: ->
      nsValue = this.get('nsValue')
      if nsValue == 'n'
        this.set('nsValue', 's')
      else if nsValue == 's'
        this.set('nsValue', 'n')

    toggleTF: ->
      tfValue = this.get('tfValue')
      if tfValue == 't'
        this.set('tfValue', 'f')
      else if tfValue == 'f'
        this.set('tfValue', 't')

    togglePJ: ->
      pjValue = this.get('pjValue')
      if pjValue == 'p'
        this.set('pjValue', 'j')
      else if pjValue == 'j'
        this.set('pjValue', 'p')

`export default DichotomySelectorComponent`

1 ответ

Решение

Вы должны быть в состоянии использовать this.set("controller.property", value) в методе внутри компонента, согласно документам здесь: http://emberjs.com/api/classes/Ember.Component.html

Редактировать сентябрь 2016 г. Этот ответ стал жертвой продолжающейся эволюции Ember и связанных с ней изменений в передовой практике. Удивительно видеть, насколько отличается Эмбер всего 1,5 года назад. Старый ответ был полностью отвергнут сообществом, о чем свидетельствуют голоса (отрицательно, когда я это печатаю), на самом деле я даже не думаю, что он больше работает. По состоянию на середину 2016 года в Ember 2.x общепринятым ответом на этот вопрос является создание действия в контроллере, которое изменяет свойство, передача этого действия компоненту и вызов действия, когда значение изменяется в компоненте. Но теперь вы можете использовать помощник действий для передачи обычного метода вместо действия и использовать ловушки жизненного цикла компонента для обнаружения изменений в компоненте вместо использования наблюдателя или вычисляемого свойства. Вы также можете использовать сервис вместо этого. Больше изменений на пути, я уверен.

Для любых будущих читателей, любые вопросы, которые вам нужно изучить о Ember, убедитесь, что вы фильтруете результаты по времени, вы хотите результаты только в течение последнего года.

Другие вопросы по тегам