FuelUX 树数据源选项未定义答案

【问题标题】：FuelUX Tree dataSource options undefinedFuelUX 树数据源选项未定义
【发布时间】：2014-10-03 13:02:53
【问题描述】：

我正在尝试使用 FuelUX 实现树视图。

到目前为止，我设法从网站上设置了示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fuel UX Basic Template (Globals)</title>
    <!-- CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css" rel="stylesheet">



  </head>
  <body class="fuelux">


    <ul class="tree fuelux" 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>

    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>

   <script>

        $(document).ready(function() {

                $('#myTree').tree({
                    dataSource: function(options, callback){

                      var self = this;
                      var param = null

                      console.log(options.type);

                      if ("type" in options && options.type == "folder") {
                          if ("dataAttributes" in options && "children" in options.dataAttributes) {
                              param = options.dataAttributes["id"];
                          }
                      }

                    if (param != null) {
                        $.ajax({
                            url: "@routes.FileController.getFolderStructure()",
                            type: 'POST',
                            params: {
                                contentType: 'application/json; charset=utf-8'
                            },
                            dataType: 'json',
                            data: JSON.stringify({ id: 1 }),
                            success: function (response) {
                                callback(response)
                            },
                            error: function (response) {
                                console.log(response);
                            }
                        })
                    }



                        setTimeout(function () {
                            callback({ data: [
                                { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
                                { name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
                                { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
                                { name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
                                { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
                                { name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
                                { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
                                { name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
                            ]});

                        }, 400);
                    },
                    multiSelect: true,
                    cacheItems: true,
                    folderSelect: false,
                });

            });

    </script>


  </body>
</html>

很遗憾，“dataSource”中传递的options 参数没有属性（type、dataAttributes 等）。

我做错了什么？如何设置这些参数？

谢谢

【问题讨论】：

标签： javascript jquery fuelux

【解决方案1】：

我收到了options.type 的"folder"。至于options.children，它不会出现在您的项目/文件夹的回调数据对象中。

这对我有用：

$('#myTree1').tree({
dataSource: function(options, callback){

var self = this;
var param = null

console.log(options.type);

if ("type" in options && options.type == "folder") {
    if ("dataAttributes" in options && "children" in options.dataAttributes) {
        param = options.dataAttributes["id"];
    }
}

if (param != null) {
    $.ajax({
        url: "@routes.FileController.getFolderStructure()",
        data: 'id=' + param,
        type: 'POST',
        dataType: 'json',
        success: function (response) {
            callback(response)
        },
        error: function (response) {
            console.log(response);
        }
    })
}



    setTimeout(function () {
        callback({ data: [
            { name: 'Ascending and Descending', type: 'folder', dataAttributes: { id: 'folder1' } },
            { name: 'Sky and Water I (with custom icon)', type: 'item', dataAttributes: { id: 'item1', 'data-icon': 'glyphicon glyphicon-file' } },
            { name: 'Drawing Hands', type: 'folder', dataAttributes: { id: 'folder2' } },
            { name: 'Waterfall', type: 'item', dataAttributes: { id: 'item2' } },
            { name: 'Belvedere', type: 'folder', dataAttributes: { id: 'folder3' } },
            { name: 'Relativity (with custom icon)', type: 'item', dataAttributes: { id: 'item3', 'data-icon': 'glyphicon glyphicon-picture' } },
            { name: 'House of Stairs', type: 'folder', dataAttributes: { id: 'folder4' } },
            { name: 'Convex and Concave', type: 'item', dataAttributes: { id: 'item4' } }
        ]});

    }, 400);
},
multiSelect: true,
cacheItems: true,
folderSelect: false,
});

我所做的只是将以上内容复制到 Fuel UX 存储库中的 index.js 中，并添加了 condole.log。打开该项目的类型“升序和降序”时，它会输出“文件夹”。

【讨论】：

感谢您的帮助。问题是，对我来说，“选项”中没有“类型”..
每当我尝试登录options.type 时，我都会收到“未定义”。我已经用完整的 html 文档更新了我的问题以进行测试。
可能是 3.0.2 中没有修复的 bug，我可能使用的是 3.1.0-WIP 分支。我在下面的这个分支中发布了一个更新的 dist 文件夹。使用以下fuelux.js 文件尝试您的代码。 raw.githubusercontent.com/ExactTarget/fuelux/updated-dist/dist/…
我们应该在本周五发布 3.1.0，但没有承诺。
感谢@InteractiveLlama。我遇到了同样的问题。我的选项对象未定义。我用您评论中的链接替换了 3.0.2 版本，一切正常。