Ember.js did-update 函数不触发

Question

灰烬 5.x

我有一个父组件 Cases 和两个子组件。 CaseList 有很多项目，用户可以选择一项。这有效。并且 onCaseSelect 被调用。我想让导航栏看到这个变化。深入研究 ember 网站、本网站和许多其他网站，似乎更新“this.selectedCase”应该会导致导航栏中的 @caseId did-update 触发。

---

病例.hbs

<div class="flex">
    <CaseList @on-case-select={{this.onCaseSelect}}>
        {{outlet}}
    </CaseList>
    <NavBar @caseId={{@selectedCase}}></NavBar>
</div>

---

案例.js

@tracked selectedCase = ''

@action
onCaseSelect(caseId) {
    console.log('cases::onCaseSelect(caseId) {', caseId) // this is logging in the console
    this.selectedCase = caseId
    this.router.transitionTo('cases.case',caseId)
}

---

nav-bar.hbs

<div class="bg-slate-400 ml-auto flex" {{did-update this.onCaseIdUpdate @caseId}}>

---

nav-bar.js

@tracked caseId
@action
onCaseIdUpdate() {
    console.log('nav-bar::onCaseIdUpdate() {',this.args.caseId) // this NEVER fires
    this.caseId = this.args.caseId
}

Answer 1

既然你没有使用该元素，为什么不完全摆脱

{{did-update}}

呢？

试试这个：

{{ (this.onCaseIdUpdate) }}

onCaseIdUpdate = () => {
  this.caseId = this.args.caseId
}

然而在这个特定的例子中，这将导致额外的渲染（就像任何类似“效果”的行为一样（所以一般情况下应该使用效果非常非常））。

您可能希望在单个渲染过程中处理相同的行为：

get caseId() {
  return this.args.caseId;
}

或者，如果您需要临时本地状态，直到下一次

@caseId

更新，您可以使用

https://github.com/tracked-tools/tracked-toolbox#localcopy

中的 @localCopy

@localCopy('args.caseId') caseId;