1

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>

残念ながら、async-fragment ブロックには何も読み込まれません。プレースホルダーでさえありません。

プレースホルダーを表示してから、データをテンプレートに配置するにはどうすればよいですか?

4

1 に答える 1

1

問題が解決しました！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;
    });
};
于 2015-11-20T03:47:22.890 に答える