Fuelux 3 树"DataSource is object not a function"

Question

我想用FuelUX 3/BootStrap 3和一个静态数据源制作一个树（只是为了证明）。我在网上发现了不止一个片段，但只有在FuelUX版本2中。

我使用Require.js AMD来包含libs，并且没有任何错误。

唯一的一个错误是JS控制台中的typeerror："object不是函数"。

你能帮我吗？

查看代码：

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

HTML源代码：

<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>

Answer 1

这是文档中树示例的所有JS。以下是dataSource函数的重要部分：

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