我正在尝试使用 aurelia 构建一个网络应用程序,但在呈现页面上的所有内容后,我找不到通过 AJAX 添加数据的方法。场景(简化):
有一个页面,其中的某些部分是由一个组件(比如数据表)动态组成的。 data-table 有一个标题,和 table-rows 来显示数据。数据表应该通过 AJAX 调用动态加载它的数据。我想要的是,在页面呈现后加载数据。
我尝试使用 promises 但它的作用恰恰相反,即 aurelia 在附加 View 之前等待 promise 被解决(Jeremy Danyow 也解释道:“...在这个例子中,Aurelia 将等待由在将 View 绑定(bind)到 View 模型之前激活解析方法。”(在他题为“ES7 async/await with Aurelia”的帖子中) 这会导致页面保持停滞状态,直到所有数据都加载完毕。
下面提供了一个简单的代码示例。在这里,如果您导航到此页面,在加载所有数据之前您将看不到任何内容(或者该页面不会附加)。我想要的是加载页面并显示“Table for ...”标题,同时开始在后台加载数据并在加载完成时显示表格本身。以下“模拟”屏幕截图说明了所需的行为。
before the ajax requrest is completed
after the ajax request is completed
此外,表格可能需要根据用户的选择进行更新(可能会加载其他数据并将其添加到表格中),或者可能需要将其他表格添加到页面中。
我认为所需的行为不匹配任何绑定(bind)/附加/分离等生命周期行为(但可能是错误的)。这可以使用 body.onload(或 jquery 等)的变体来实现,但我想知道这是否可以仅(或大部分)使用 aurelia 来实现。
也许,能够在附加所有内容后加载数据(例如,“附加后”回调)可能会有所帮助。在那种情况下,我会加载所有必要的组件及其已加载的数据(例如,它们的标题)并显示它们。然后,在“postattached”部分,我将开始加载数据。
示例代码:
测试.ts
export class testPage {
ids: number[] = [1,2,3] // for example 1,2,3; will be dynamically loaded as well
}
测试.html
<template>
<h1>Test</h1>
<div repeat.for="id of ids">
<compose view-model="./components/table" model.bind="id"></compose>
</div>
</template>
表格.ts
import { Loader } from './loader';
export class table {
id: number
tableData: number[][] = []
activate(model) {
this.id = model
}
attached() {
Loader.LoadData(this.id).then((res)=>{this.tableData = res})
}
}
表格.html
<template>
<h2>Table for ${id}</h2>
<div repeat.for="rows of tableData">${rows}</div>
</template>
加载器.ts
export class Loader {
static LoadData(tid): Promise<number[][]> { //simple stub to imitate real data loading
let data: number[][] = []
switch (tid) {
case 1:
data.push([11, 12, 13])
data.push([14, 15, 16])
break;
case 2:
data.push([21, 22, 23])
data.push([24, 25, 26])
break;
case 3:
data.push([31, 32, 33])
data.push([34, 35, 36])
break;
}
this.sleep()
return new Promise((resolve, reject) => {
this.sleep()
resolve(data)
})
}
protected static sleep(): boolean { // just to imitate loading time
let miliseconds = Math.floor(Math.random() * (3 - 1 + 1) + 1);
var currentTime = new Date().getTime();
console.debug("Wait for a sec: " + miliseconds)
while (currentTime + miliseconds * 1000 >= new Date().getTime()) {
}
return true
}
}
编辑:更正了此处示例中错误的代码
最佳答案
您应该尝试使用 window.timeout
来模拟加载时间。因为 Javascript 是单线程的,所以您的 sleep 函数将阻止线程上的所有其他执行。
这个答案可能有点过头了,但更详细地解释了如何在 javascript 中编写 sleep 函数:What is the JavaScript version of sleep()?
关于javascript - 呈现 View 后使用 aurelia 将数据动态添加到页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44262164/