Ember JS中{{did update}}和< div{did update}}>之间的区别

li9yvcax  于 2022-09-28  发布在  其他
关注(0)|答案(1)|浏览(157)

当我使用did-update而不使用<div> Package 时,在did-upgrade中使用的操作陷入无限循环。用<div> Package 后,问题就解决了。
下面是一个示例代码:(current是显示当前状态的服务)

不工作:(当this.current.locationId更改时,this.updateStates将无限执行)

{{did-update this.updateStates this.current.locationId}}

是否有效:

<div {{did-update this.updateStates this.current.locationId}}>
</div>

JS文件:

@tracked property;

@action
updateStates() {
  //do something with `this.current.locationId`
  //change value of `property`
  //so template re-render cause of `property` changed
  ...
}

我想问题的发生是因为跟踪帧。但我不清楚为什么会发生这种问题。

5t7ly7z5

5t7ly7z51#

根据引入{{did-update}}的插件,它看起来只定义了一个修饰符
当使用globals解析器(在这里不需要导入任何内容)时,语法比键入的内容的名称更重要。
因此,模板中的{{did-update}}是一个helper。这将在app/addon的helpers目录中查找。<div {{did-update}}>是一个修饰符。这将在app/addon的modifiers目录中查找。
我为如何阅读语法做了一个小解释:

<div {{this.modifierName a b=(this.helperName c)}}>
{{!--  │                 │ │  │               └─── positional argument
       │                 │ │  └─── helper
       │                 │ └─── named argument key
       │                 └─── positional argument
       └─── modifier --}}
  {{yield to="default"}}
{{!--  │  │   └─── value
       │  └─── named argument key
       └─── helper --}}
</div>

<div {{@modifierName a b=(@helperName c)}}>
{{!--  │             │ │  │           └─── positional argument
       │             │ │  └─── helper
       │             │ └─── named argument key
       │             └─── positional argument
       └─── modifier --}}
  {{yield to="default"}}
{{!--  │  │   └─── value
       │  └─── named argument key
       └─── helper --}}
</div>

发件人:https://cheatsheet.glimmer.nullvoxpopuli.com/docs/templates
当您使用局部值时,会有轻微的差异。例如:

class Demo extends Component {
  foo = () => {};
}

使用这个函数foo,我们可以用以下方式使用它

{{this.foo}} renders, but is a function, so it doesn't render nicely
{{ (this.foo) }} invokes the function and renders the output, or nothing if undefined

<div {{this.foo}}></div> errors, because the function, foo, is not a modifier
<div {{ (this.foo) }}></div> invokes foo, because it is a function / helper, returns undefined, which is now in "modifier space", undefined modifiers are no-ops, and does nothing. This is useful for when you want to do conditional modifiers
<div {{ (if this.someCondition this.myModifier}}) }}></div> this will collapse down to (if some condition is true):
<div {{this.myModifier}}></div>

<this.foo /> errors, because the function, foo, does not have an associated component manager / foo is not a component.

相关问题