fuelux 3 tree "DataSource is object not a function"

Question

I want to make a tree with FuelUX 3/BootStrap 3 and a static datasource (just for testimonial). I've found more than one snippet on net but only in FuelUX version 2.

I use Require.js AMD for include the libs and no errors from that.

The only one error is a typeerror : "object is not a function" from the JS console.

Can you help me ?

Look at code :

var DataSource = function (options) {
    this._data = options.data;
};

DataSource.prototype.data = function (options, callback) {
    var self = this;
    if (options.search) {
        callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page });
    } else if (options.data) {
        callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
    } else {
        callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
    }
};

var treeDataSource = new DataSource({ 
    data: [
        { name: 'Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
        data: [
            { name: 'Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
            { name: 'Sub Folder 2', 
            data: [
                {name: 'sub sub folder 1', type: 'folder', additionalParameters: { id: 'FF21' }},
                {name: 'sub sub item', type: 'item', additionalParameters: { id: 'FI2' }}
            ],
            type: 'folder', additionalParameters: { id: 'FF2' }},
            { name: 'Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
        ]},
        { name: 'Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
        { name: 'Item 1', type: 'item', additionalParameters: { id: 'I1' } },
        { name: 'Item 2', type: 'item', additionalParameters: { id: 'I2' } }
    ],
    delay: 400
});

$('#myTree').tree({
    dataSource: treeDataSource,
    multiSelect: false,
    loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
    'open-icon': 'icon-minus',
    'close-icon': 'icon-plus',
    'selectable': true,
    'selected-icon': 'icon-ok',
    'unselected-icon': 'icon-remove'
});

And the HTML source :

<ul class="tree" role="tree" id="myTree">
              <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="tree-branch-header">
                  <button class="tree-branch-name">
                    <span class="glyphicon icon-caret glyphicon-play"></span>
                    <span class="glyphicon icon-folder glyphicon-folder-close"></span>
                    <span class="tree-label"></span>
                  </button>
                </div>
                <ul class="tree-branch-children" role="group"></ul>
                <div class="tree-loader" role="alert">Loading...</div>
              </li>
              <li class="tree-item hide" data-template="treeitem" role="treeitem">
                <button class="tree-item-name">
                  <span class="glyphicon icon-item fueluxicon-bullet"></span>
                  <span class="tree-label"></span>
                </button>
              </li>
            </ul>

score 0 · Answer 1 · answered Oct 22 '14 at 23:17

This is all the JS for the tree example in the docs. The following is the essential part of the dataSource function:

   dataSource: function(options, callback){
     // AJAX your data, format it, sort, etc.
     var yourData = [{ name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } }];
     // continue with rendering the tree
     callback({ data: yourData });
   }

fuelux 3 tree "DataSource is object not a function"

1 Answers1