我正在尝试让渐进式渲染在Marko和Koajs中工作。
首先,我使用request-promise模块对JSON数据提要做出承诺。
rp = require('request-promise')
function getDataFeed() {
var url = "http://api.dronestre.am/data";
var options = {
url: url,
headers: { 'User-Agent': 'request' },
};
rp(options).then(function(result) {
var info = JSON.parse(result);
return info.strike;
});
};
然后,我使用koa路由器和Marko加载供稿作为数据输入的模板
// router method to serve first visualization
router.get('/first', function *() {
let data = {
strikes : getDataFeed()
};
this.body = marko.load('./views/first.marko').stream(data);
this.type = "text/html";
})
最后,在模板中,我使用async-fragment指示应该异步加载页面的这一部分:
<async-fragment data-provider='data.strikes' var='strikes' client-reorder='true'>
<async-fragment-placeholder>
<p>Loading...</p>
</async-fragment-placeholder>
<for each="strike in strikes">
<tr>
<td>${strike.number}</td>
<td>${strike.country}</td>
<td>${strike.date}</td>
<td>${strike.narrative}</td>
<td>${strike.town}</td>
<td>${strike.deaths}</td>
<td>${strike.target}</td>
<td>${strike.lat}</td>
<td>${strike.lon}</td>
</tr>
</for>
</async-fragment>
不幸的是,异步片段块中什么也没有加载。甚至没有占位符。
如何显示占位符,然后在模板中替换数据?
最佳答案
问题解决了!我需要在getDataFeed()中返回promise函数
解:
rp = require('request-promise')
function getDataFeed() {
var url = "http://api.dronestre.am/data";
var options = {
url: url,
headers: { 'User-Agent': 'request' },
};
return rp(options).then(function(result) {
var info = JSON.parse(result);
return info.strike;
});
};