如何从Node.js express服务器返回JSON数据到Riot.js？

我正在开发一个Web应用程序，在客户端使用Riot.js，在服务器端使用Node.js。 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 – 如何在单个请求中向浏览器发送页面和一些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
• expressionv4.13.3

Answer 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(); 

Answer 2

在他们的例子之一中，他们使用获取 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 }) }) 

链接到回购