【问题标题】:How to change controller property from component?如何从组件更改控制器属性?
【发布时间】:2015-06-01 17:07:56
【问题描述】:

我在控制器中有一个属性。我想使用一个组件来更新该控制器属性。当我使用指南所说的文本字段时,通常的组件参数传递有效,但在我的情况下,我正在更改代码中的值,而不是输入字段。绑定似乎被破坏了。

我应该使用什么类似于 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`

【问题讨论】:

    标签: ember.js properties components ember-1


    【解决方案1】:

    您应该能够在组件内的方法中使用this.set("controller.property", value),根据此处的文档:http://emberjs.com/api/classes/Ember.Component.html#property_controller

    2016 年 9 月编辑 这个答案一直是 Ember 持续发展以及最佳实践相关变化的牺牲品。看到 Ember 与 1.5 年前有多么不同,真是令人惊讶。正如投票所证明的那样,旧的答案已被社区完全拒绝(当我输入这个时是否定的),事实上我认为它甚至不再起作用了。截至 2016 年中期,在 Ember 2.x 中,对该问题的普遍接受的答案是在控制器中创建一个更改属性的操作,将该操作传递给组件,并在组件上的值发生更改时调用该操作。但是现在您可以使用动作助手来传递常规方法而不是动作,并使用组件生命周期挂钩来检测组件中的更改,而不是使用观察者或计算属性。您也可以改用服务。我敢肯定,还会有更多变化。

    对于任何未来的读者,如果您需要研究有关 Ember 的任何问题,请确保您按时间过滤结果,您只需要去年的结果。

    【讨论】:

    • 在哪里?我在任何地方都没有看到。
    • 我想也许你对组件是什么有不同的想法。您能否将您的代码添加到您的问题中?
    • 这个答案一直是 Ember 持续发展以及最佳实践相关变化的牺牲品。看到 Ember 与 1.5 年前有多么不同,真是令人惊讶。这个问题的当前答案是,在控制器中创建一个更改属性的操作,将该操作传递给组件,当组件上的值更改时调用该操作。但是现在你可以使用 action helper 来传递一个方法而不是一个 action,并使用组件生命周期钩子来检测组件的变化,而不是使用观察者或计算属性。
    • 我认为 api 刚刚更改。您的链接链接到文档的当前版本。这是 Ember 版本 1 链接:emberjs.com/api/ember/1.13/classes/… 不过,查看该文档,我根本没有看到任何关于属性控制器的信息。所以.. 建议只是.. 错了?
    • @NullVoxPopuli 当时是正确的,文档链接也是如此。正如编辑所解释的,您应该在控制器中捕获的组件上调用一个操作,这将修改控制器属性。原始问题中的 ArrayController 甚至不再存在,即使您仍然可以,也不应该使用 .observes 。而且我不再使用 Ember,看起来 Ember 3 已经出来了,所以现在谁知道呢。虽然我怀疑它与 Ember 2 相同。除了正确的解决方案可能是现在使用服务。
    猜你喜欢
    • 2016-07-18
    • 2016-07-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-23
    相关资源
    最近更新 更多