从骨干收集设置fuelux datagrid源 [英] setting fuelux datagrid source from backbone collection

问题描述

我正在尝试从我的骨干集合设置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 ///这将返回新的集合数组如例如
}; 
}））; 
  

我的骨干渲染包含以下代码来定量数据源

  var dataSource = new StaticDataSource（{
 columns：[
 {
 property：'username'，
 label：'名称'，
可排序：true 
}，
 {
属性：'username'，
标签：'国家'，
可排序：true 
}，
 data：this.collection，
 delay：250 
}）; 
 $（'＃MyGrid'）。datagrid（{
 dataSource：dataSource，
 stretchHeight：true 
}）; 
  

我收到错误StaticDataSource未定义。

<有谁能解释我这个吗或者，如果您可以帮助我，可以帮助我解释如何从骨干收集中设置数据源数据的引导线？燃料配料在我看来有很好的文档。

解决方案

样本数据源在 https://github.com/ExactTarget/fuelux/blob/master/sample/datasource.js 可让您填写通过调用 .toJSON（），可以从Backbone集合获取一个简单的JavaScript对象的datagrid。然后，如下实例化数据源：

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

（将列替换为您自己的网格所需的列，并将 data：sampleData.geonames 替换为数据：yourCollection.toJSON（））

您应该可以如下实例化数据网格：

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

注意：这需要一次性的数据快照并将其提供给datagrid。如果您希望您的datagrid支持您的Backbone集合的实时查询，那么只需提供一个数据源，从而使这些查询与您的集合相对应。数据源模式允许最终开发人员将数据网格连接到任何类型的数据提供者。这是另一个使用Flickr API的例子： http://dailyjs.com/2012/ 10/29 / fuel-ux /

我不知道任何现有的数据源示例专门为Backbone，但如果有人不打败我我可以创建一个 - 我也很喜欢Backbone。

I am trying to set the fuelux datagrid source from my backbone collection. The examples source is here on https://github.com/ExactTarget/fuelux/tree/master/sample .

I tired like

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

And my backbone render consist following code to instatate data source

   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
        });

I get error StaticDataSource is not defined.

Can anyone explain me this? Or i will be greatful if you can help with me any reference to tutorail that explains well how to set datssource data from backbone collection? fuelux dosent have well documentation in my view.

解决方案

The sample datasource at https://github.com/ExactTarget/fuelux/blob/master/sample/datasource.js allows you to populate the datagrid with a simple JavaScript object, which you could get from a Backbone collection by calling .toJSON() on the collection. Then, instantiate the datasource as follows:

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

(replace the columns with what's needed for your own grid, and replace data: sampleData.geonames with data: yourCollection.toJSON())

You should then be able to instantiate the datagrid as follows:

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

NOTE: this takes a one-time snapshot of your data and provides it to the datagrid. If you want your datagrid to support live queries against your Backbone collection it would just be a matter of providing a datasource that makes those queries against your collection. The datasource pattern allows end developers to connect a datagrid to any kind of data provider. Here is another example that uses the Flickr API: http://dailyjs.com/2012/10/29/fuel-ux/

I don't know of any existing datasource examples specifically for Backbone but if someone doesn't beat me to it I may create one - I really like Backbone also.

这篇关于从骨干收集设置fuelux datagrid源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！