Ember.js 2.3在HasMany关系中实现@ each.property观察者? [英] Ember.js 2.3 implement @each.property observer on a HasMany relationship?

查看:109
本文介绍了Ember.js 2.3在HasMany关系中实现@ each.property观察者?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

说我有一个hasMany关系Procedure => hasMany步骤,与async:true,我有一个过程组件(在过程路线上)称为procedure-main,其中列出了如下步骤:

  {{#each steps as | step | }} 
{{step.title}}
{{/ each}}

我需要在每个步骤上观察一个属性(比如说stepStatus),在任何步骤上更改stepStatus。在Ember 1.7中,我在程序控制器上有这样的东西:

  stepsStatusObserver:function(){
..
} .observes('steps。@ each.stepStatus')

关于stepStatus上任何一个步骤的更改,以及我在此功能中的任何内容,当状态发生变化时都被触发。但是,在Ember 2.3中,我无法实现。我尝试过

  stepsStatusObserver:Ember.observer('steps。[]。stepStatus',function(){
...
})

但是只有在列出步骤时才会触发一次在页面上当我将一步的状态更改为新值时,该函数永远不会被触发。



如何在Ember 2.3中复制此功能?



注意:在我的用例中,我不能依赖在点击按钮后手动设置观察者内部的功能,因为如果在任何步骤中更改了stepStatus属性,它必须自动触发。

解决方案

问题是步骤。[]。stepStatus 不再是有效的从属密钥。您应该将其替换为步骤。@ each.stepStatus



以下是有效和无效的依赖密钥的摘要在当前的Ember版本中:




  • array - 观察数组引用本身是否改变,例如用另一个值或数组替换整个数组,例如 oldValue!== newValue

  • 数组。[] - 当数组本身发生变化(上图)和数组长度变化(功能上相当于 array.length )时,

  • array。@ each.property - 观察两种情况,当某些数组项目的属性更改

  • array。@ each。{prop,anotherProp} 您也可以在仅指定一个键的同时观察多个属性。这将展开为数组。@ each.prop array。@ each.anotherProp

  • 数组@每个 - 不再有效,没有尾随 @each 。使用。[]

  • array。@ each.property.property - 也无效。请注意, @each 只能深入一层。您不能使用嵌套表单,如 todos。@ each.owner.name todos。@ each.owner。@ each.name

  • array。[]。property - 无效。使用 @each 表单。


Say I have a hasMany relationship Procedure => hasMany Steps, with async:true, and I have a Procedure Component (on the procedure route) called procedure-main, which lists the steps as so:

{{#each steps as |step| }}
 {{step.title}}
{{/each}}

I need to observe a property on each step (say, stepStatus) on change to the stepStatus on any of the steps. In Ember 1.7, I had something like this on the procedure controller:

stepsStatusObserver: function(){
...
}.observes('steps.@each.stepStatus')

This was fired on change of stepStatus on any on the steps, and whatever I had in this function was fired whenever the status changed as well. However, in Ember 2.3, I cannot implement this. I have tried with

stepsStatusObserver: Ember.observer('steps.[].stepStatus', function(){
...
})

but this only fires once when the steps are being listed on the page. When I change the status of one step to a new value, the function is never fired.

How can I replicate this functionality in Ember 2.3?

Note: In my use case, I cannot rely on manually setting off the function inside the observer on the click of a button as it must automatically fire if the stepStatus property was changed on any step.

解决方案

The problem is that steps.[].stepStatus is not a valid dependent key anymore. You should replace it by steps.@each.stepStatus.

Here is a summary of valid and invalid dependent keys in current Ember versions:

  • array - this observes if the array reference itself changes, e.g replacing the entire array with another value or array such as that oldValue !== newValue.
  • array.[] - this observes both when the array itself changes (above) and when the array length changes (functionally equivalent of array.length)
  • array.@each.property - observes both cases above and when property of some of the array's items change
  • array.@each.{prop,anotherProp} - you can also observe multiple properties while specifying only one key. This expands to array.@each.prop and array.@each.anotherProp.
  • array.@each - isn't valid anymore, no trailing @each. Use .[] instead.
  • array.@each.property.property - Also not valid. Note that @each only works one level deep. You cannot use nested forms like todos.@each.owner.name or todos.@each.owner.@each.name.
  • array.[].property - not valid anymore. Use @each form instead.

这篇关于Ember.js 2.3在HasMany关系中实现@ each.property观察者?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆