从骨干集合中设置fuelux datagrid源

时间:2013-04-01 13:58:40

标签: javascript datagrid backbone-collections fuelux

我正在尝试从我的骨干集合中设置fuelux datagrid源。示例来源位于https://github.com/ExactTarget/fuelux/tree/master/sample

我累了

(function (root, factory) {
 if (typeof define === 'function' && define.amd) {
 define(factory);
 } else {
    root.sampleData = factory();
   }
}(this, function () {
return { 
          "geonames": new mycollection ///this will retrurn new collection array as in     example
   };
}));

我的主干渲染包括以下代码来安装数据源

   var dataSource = new StaticDataSource({
            columns: [
                {
                    property: 'username',
                    label: 'Name',
                    sortable: true
                },
                {
                    property: 'username',
                    label: 'Country',
                    sortable: true
                },
            data: this.collection,
            delay: 250
        });
        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

我收到错误StaticDataSource未定义。

任何人都能解释一下这个吗?或者,如果你能帮助我任何有关如何从骨干收集中设置数据源数据的tutorail的帮助,我将会很高兴吗?在我看来,fuelux dosent有很好的文档。

1 个答案:

答案 0 :(得分:1)

https://github.com/ExactTarget/fuelux/blob/master/sample/datasource.js处的示例数据源允许您使用简单的JavaScript对象填充数据网格,您可以通过调用集合上的.toJSON()从Backbone集合中获取该对象。然后,按如下方式实例化数据源:

https://github.com/ExactTarget/fuelux/blob/master/index.html#L112-L138

(将列替换为您自己网格所需的内容,并将data: sampleData.geonames替换为data: yourCollection.toJSON()

然后,您应该能够按如下方式实例化数据网格:

https://github.com/ExactTarget/fuelux/blob/master/index.html#L144-L147

注意:这会获取数据的一次性快照,并将其提供给数据网格。如果您希望您的数据网格支持针对您的Backbone集合的实时查询,那么只需提供一个数据源来对您的集合进行查询。数据源模式允许最终开发人员将数据网格连接到任何类型的数据提供者。以下是使用Flickr API的另一个示例:http://dailyjs.com/2012/10/29/fuel-ux/

我不知道任何现有的专门针对Backbone的数据源示例,但是如果有人没有打败我,我可以创建一个 - 我也非常喜欢Backbone。