Aurelia

Question

使用 Aurelia JS 框架，我需要能够检测 repeat.for 元素的结果何时已通过父 VM 中的代码完全加载到 DOM 中。我知道我可以将侦听器注入 @bindable 并在 attached() 上触发侦听器，但这对我来说似乎很虚伪。

有什么想法吗？

Answer 1

问题是您在 attached 方法中推送项目并且您正在使用动态组合，这通常不是问题，但您的情况有点不同。排队微任务没有帮助，因为它在您的视图 (child.html) 加载之前运行。

有几种方法可以解决这个问题：

1°解

将您的物品推入 bind():

bind() {
  this.items.push({
     view: 'child.html',
     viewModel: new Child('A')
  });  

  this.items.push({
     view: 'child.html',
     viewModel: new Child('B')
   });
}

attached() {

  let container = document.getElementById('container');
  console.log('Height after adding items: ' + container.clientHeight);

  this._taskQueue.queueMicroTask(() => {
    console.log('Height after queued microtask: ' + container.clientHeight);    
  });

  setTimeout(() => {
    console.log('Height after waiting a second: ' + container.clientHeight);    
  }, 1000);

}

修正 HTML:

<template>
  <div id="container">
    <div repeat.for="item of items">
      <compose view-model.bind="item.viewModel" view.bind="item.view"></compose>
    </div>
  </div>
  <div style='margin-top: 20px'>
    <div repeat.for="log of logs">
      ${log}
    </div>
  </div>
</template>

运行示例 https://gist.run/?id=7f420ed45142908ca5713294836b2d5e

2º 解

不要使用<compose>。当需要动态组合时，可以使用 Compose。您确定需要使用 <compose> 吗？。

<template>
  <require from="./child"></require>

  <div id="container">
    <div repeat.for="item of items">
      <child>${item.data}</child>
    </div>
  </div>
</template>

Aurelia - 儿童作文什么时候完成？

Aurelia - when are child compositions done?

javascript

aurelia-templating

1°解

2º 解