2

クライアント側で Riot.js を使用し、サーバー側で Node.js Express を使用して Web アプリケーションを開発しています。Riot.js は JSON データをマウントでき、HTML のレンダリングに使用できます。実際、サーバー側にいくつかの JSON データがあり、それらを Riot.js で使用したいと考えています。

現在、エクスプレス サーバーのコードは非常に単純です。

  var express = require('express'),                                                                                             
      serveIndex = require('serve-index'),                                                                                      
      app = express();                                                                                                          

  app.use(express.static(__dirname + '/public'));                                                                               
  app.use(serveIndex(__dirname + '/public'));                                                                                   
  app.listen(3000);

私の質問には HTML テンプレートが役立つと思います。しかし、Riot.js では答えが見つかりませんでした。サーバーからデータを使用してレンダリングするにはどうすればよいですか?

データが次のようにクライアント側にある場合、データをマウントする方法を知っています。

    <script>                                                                                                                   
      riot.mount('my_hoge', {                                                                                                
        data: [                                                                                                                
          { name: 'A', url: 'xxxx'},                                                                                           
          { name: 'B', url: 'yyy', isActive: true},                                                                          
          { name: 'C', url: 'zzzz'}                                                                                           
        ]                                                                                                                            })                                                                                                                       
   </script>

環境

  • Node.js v5.3.0
  • エクスプレス v4.13.3
4

2 に答える 2

1

次のように、AJAX を使用して JSON データを Riot.js 要素にロードできます。

var url = "http://yourserver:3000/";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText);
        riot.mount('my_hoge', { data: data });
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
于 2016-01-29T15:37:04.947 に答える