如何从 Node.js 快速服务器将 JSON 数据返回到 Riot.js？答案

【问题标题】：How do I return JSON data to Riot.js from Node.js express server?如何从 Node.js 快速服务器将 JSON 数据返回到 Riot.js？
【发布时间】：2017-04-01 01:53:14
【问题描述】：

我正在开发一个 Web 应用程序，在客户端使用 Riot.js，在服务器端使用 Node.js express。 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 的答案，如何使用和渲染来自服务器的数据？

Node & Express - How do I send a page AND some JS data to the browser in a single request?

如果数据在客户端，我知道如何挂载数据：

    <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
express v4.13.3

【问题讨论】：

从您的客户端向您的 json 进行 ajax 调用，然后开心....developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
这里有一个来自 riotjs 的例子：riotjs.com/api/#tag-update
太棒了！我可以。在快速服务器上设置返回测试数据的 API 后，我可以通过覆盖 Riot.js 的数据，使用 ajax 的回调在客户端重新渲染数据
@jef HTML、JSON等请大写

标签： javascript node.js express riot.js

【解决方案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();

【讨论】：

【解决方案2】：

在他们的一个示例中，他们使用fetch API 从服务器获取数据。

window.fetch('http://api.fixer.io/latest?base=USD')
  .then(function(response) { return response.json() })
  .then(function(data) {
    var rates = Object.keys(data.rates)
      .map(function (key) { return { title: key, price: data.rates[key] }})
      .sort(function(a, b) { return a.price - b.price })
    self.update({ rates: rates })
})

link 到仓库

【讨论】：