javascript - 如何从 Rails 向 Fuel UX 数据网格提供数据？

Question

我想使用 Fuel UX 数据网格来显示我从数据库中检索的一些数据。该页面由 ruby​​ on rails 服务器提供。

用于构建数据对象的 javascript 示例代码:

        var dataSource = new StaticDataSource({
            columns: [{
                property: 'toponymName',
                label: 'Name',
                sortable: true
            }, {
                property: 'countrycode',
                label: 'Country',
                sortable: true
            }, {
                property: 'population',
                label: 'Population',
                sortable: true
            }, {
                property: 'fcodeName',
                label: 'Type',
                sortable: true
            }],
            data: sampleData.geonames,
            delay: 250
        });

        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

        $('#datagrid-reload').on('click', function () {
            $('#MyGrid').datagrid('reload');
        });

如果我理解代码，我将在 dataSource 变量内的列对象中定义我的列和一些属性，并且数据对象由 sampleData.geonames 加载。

样本数据是here

使用 Rails 约定替换 sampleData.geonames 可以做什么？我尝试通过几种方式调整它以将 Rails 对象加载到此处。

例如，我修改了列的属性字段以对应于我的用户模型的某些属性。我尝试更换

data: sampleData.geonames,

到

data: <%= @users.to_json %>,

我对 gem 和版本有点限制，目前使用的是 Rails 2.3。

感谢您的帮助。

Answer 1

如果您希望数据网格发出后台 AJAX 请求以从您的应用程序加载数据，请参阅本教程，它将更接近您的需要:

http://dailyjs.com/2012/10/29/fuel-ux

这样做的好处是立即加载页面，然后异步加载数据。

如果您宁愿坚持使用 StaticDataSource 方法，只需在您的页面上嵌入一个类似于此的小脚本:

<script>
  var myData = { ... };
</script>

然后，载入:

var dataSource = new StaticDataSource({
  columns: [ ... ],
  data: myData,
  delay: 250
});