如何从组件更改控制器 属性?
How to change controller property from component?
我在控制器中有一个 属性。我想使用一个组件来更新该控制器 属性。当我像指南所说的那样使用文本字段时,通常的组件参数传递有效,但就我而言,我正在更改代码中的值,而不是输入字段。绑定好像坏了。
我应该使用什么类似于 属性DidChange() 或 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`
根据此处的文档,您应该能够在组件内部的方法中使用 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 这个问题的普遍接受的答案是在控制器中创建一个更改 属性 的操作,将该操作传递给组件,然后调用当组件的值发生变化时的动作。但是现在您可以使用 action helper 来传递常规方法而不是 action,并使用组件生命周期挂钩来检测组件中的变化,而不是使用观察者或计算 属性。您也可以改用服务。我敢肯定,还会有更多变化。
对于任何未来的读者,如果您需要研究任何关于 Ember 的问题,请确保按时间过滤结果,您只需要去年的结果。
我在控制器中有一个 属性。我想使用一个组件来更新该控制器 属性。当我像指南所说的那样使用文本字段时,通常的组件参数传递有效,但就我而言,我正在更改代码中的值,而不是输入字段。绑定好像坏了。
我应该使用什么类似于 属性DidChange() 或 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`
根据此处的文档,您应该能够在组件内部的方法中使用 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 这个问题的普遍接受的答案是在控制器中创建一个更改 属性 的操作,将该操作传递给组件,然后调用当组件的值发生变化时的动作。但是现在您可以使用 action helper 来传递常规方法而不是 action,并使用组件生命周期挂钩来检测组件中的变化,而不是使用观察者或计算 属性。您也可以改用服务。我敢肯定,还会有更多变化。
对于任何未来的读者,如果您需要研究任何关于 Ember 的问题,请确保按时间过滤结果,您只需要去年的结果。