翻译 - 【Dojo Tutorials】Connecting a Store to a Tree

原文：Connecting a Store to a Tree

Dojo Tree组件是一个强大的展示层级数据的工具。该教程将展示如何连接tree与store来快速有效的展示层级数据。

介绍

Dojo Tree组件为展示层级数据提供了一种综合的，熟悉的，直观的方式。它将展示与数据分离。本文将提到为驱动一个tree提供数据的多种方法。

第一个例子使用一个静态tree，其数据从一个JSON文件中获取。这可以用于通过数据提供导航。第二个例子在这个设计的基础上扩展新的强大功能，如拖拽，维护一个动态的tree。最后的例子如何懒加载数据。

带有静态Store的Tree

静态的store比较适合用于有限的tree。这个例子中，点击tree的节点将会展示一个相关的图片。

第一步是构造数据。我们将使用内存store，也就是说store的数据是用JSON编码表示的，可以包含一些提供的信息。在这方面，每个节点中name做标签使用。这个tree有四个子项，每个子项都有name与id。

{
    "name": "US Goverment",
    "id": "root",
    "children": [
        {
            "name": "Congress",
            "id": "congress"
        },
        {
            "name": "Executive",
            "id": "exec"
        },
        {
            "name": "Judicial",
            "id": "judicial"
        }
    ]
}

一个tree由实现了dijit/tree/model的接口的对象提供数据。通常，这个对象是dijit/store/ObjectStoreModel的一个实例，且有dojo/store存储。这就是该实例工作的方式。

下面的代码构建一个内存store，供给一个ObjectStoreModel，然后用于一个tree。最后，onLoad与onClick事件用于展示相关的图片。

require([
    "dojo/dom",
    "dojo/json",
    "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel",
    "dijit/Tree",
    "dojo/text!./data/static",
    "dojo/domReady!"
], function(dom, JSON, Memory, ObjectStoreModel, tree, data) {
    var govermentStore = new Memory({
        data: [ JSON.parse(data) ],
        getChildren: function(object) {
            return object.children || [];
        }
    });

    var govermentModel = new ObjectStoreModel({
        store: govermentStore,
        query: {id: 'root'},
        mayHaveChildren: function(item) {
            return "children" in item;
        }
    });

    var govermentTree = new Tree({
        model: govermentModel,
        onOpenClick: true,
        onLoad: function() {
            dom.byId("image").src = "../resources/images/root.jpg";
        },
        onClick: function(item) {
            dom.byId("image").src = "../resources/images/" + item.id + ".jpg";
        }
    }, "divTree");

    govermentTree.startup();
});

注意我们自己实现两个方法：

1. getChildren() - 用于返回给定项的子项列表
2. mayHaveChildren() - 在这个简单的表单中它总是返回真，如果返回假，则说明只是查看这个项，它并没有子项，当前或以后（由于拖拽或其他数据更新了store）。

动态更新与拖拽

我们将学习如何使用Tree的拖拽功能，以及实时响应数据的变化。

对于一个带有数据更新的Tree，包括DnD，store需要能够理解与追踪父子关系，当一个甚至一系列子项变化时通知tree。基于此，我们将创建关联格式的数据，每项都指向它的父元素：

[
    {
        "name": "US Government",
        "id": "root"
    },
        {
            "name": "Congress",
            "id": "congress",
            "parent": "root"
        },
            {
                "name": "House of Representatives",
                "id": "house",
                "parent": "congress"
            },
            {
                "name": "Senate",
                "id": "senate",
                "parent": "congress"
            },
        {
            "name": "Executive",
            "id": "exec",
            "parent": "root"
        },
             {
                "name": "President",
                "id": "pres",
                "parent": "exec"
            },
            {
                "name": "Vice President",
                "id": "vice-pres",
                "parent": "exec"
            },
            {
                "name": "Secretary of State",
                "id": "state",
                "parent": "exec"
            },
            {
                "name": "Cabinet",
                "id": "cabinet",
                "parent": "exec"
            },
                {
                    "name": "National Security Council",
                    "id": "security",
                    "parent": "cabinet"
                },
                {
                    "name": "Council of Economic Advisers",
                    "id": "economic",
                    "parent": "cabinet"
                },
                {
                    "name": "Office of Management and Budget",
                    "id": "budget",
                    "parent": "cabinet"
                },
        {
            "name": "Judicial",
            "id": "judicial",
            "parent": "root"
        }
]

不管缩进，这实际是一个扁平化的列表，每个元素指向它的父元素（除了根元素）。

接下来，我们构建store。这个store需要具备一下能力用于ObjectStoreModel与Tree，且能反射动态数据的更新：

1. 支持通过query方法获取根节点（store.query()），而不是store.get()，且返回一个只有一个元素的列表与observe()方法。ObjectStoreModel将利用observe()的方法来检测跟节点的改变，例如修改了标签。
2. getChildren()方法返回一个带有observe()函数的子元素列表。observe()方法用于检测子节点的变化，对于新的节点加入或有子节点被删除的情况。
3. put()方法可以用于向一个节点添加子节点。

前两点用一个Observable包裹的store很容易实现。另外，getRoot()与getChildren()也可以在store作为查询类实现。

对于第三点，自从dojo/store/Memory不再支持这一选项，我们需要自己添加。代码像下面这样：

require([
    "dojo/aspect",
    "dojo/json",
    "dojo/query",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dijit/Tree",
    "dijit/tree/ObjectStoreModel",
    "dijit/tree/dndSource",
    "dojo/text!./data/all.json",
    "dojo/domReady!"
], function(aspect, json, query, Memory, Observable, Tree, ObjectStoreModel, dndSource, data) {
    
    // set up the store to get the tree data, plus define the method
    // to query the children of a node
    var governmentStore = new Memory({
        data: json.parse(data),
        getChildren: function(object) {
            return this.query({parent: object.id});
        }
    });

    // To support dynamic data changes, including DnD,
    // the store must support put(child, {parent: parent})
    // But dojo/store/Memory doesn't, so we have to implement it.
    // Sine our store is relational, that just amounts to setting child.parent
    // to the parent's id.
    aspect.around(governmentStore, "put", function(originalPut) {
        return function(obj, options) {
            if(options && options.parent) {
                obj.parent = options.parent.id;
            }
            return originalPut.call(governmentStore, obj, options);
        }
    });

    // give store Observable interface so Tree can track updates
    governmentStore = new Observable(governmentStore);
});

最后，添加拖拽支持，我们需要定义一个拖拽控制器：我们将使用标准的dijit/tree/dndStore作为控制器：

require([
    "dijit/Tree",
    "dijit/tree/dndSource",
    "dojo/domReady!"
], function(Tree, dndSource) {
    var tree = new Tree({
        model: usGov,
        // define the drap-n-drop controller
        dndController: dndSource
    }, "tree");
    tree.startup();
});

现在拖拽操作应该触发调用通过put()更新数据的model.pasteItem()函数。

代码操作数据变更

值得注意的是Tree遵循响应数据变更而不是控制器动作的标准MVC原则。这是非常强大的功能因为数据视图可以响应变化而不关心是什么引起了变化（也许是代码操作，拖拽等等）。

因此，添加一个子节点，我们可以使用put()保存它，指定父节点，Tree可以自动响应。下面的样例中，一个按钮出发子对象的添加动作：

query("#add-new-child").on("click", function() {
    // get the selected object from the tree
    var selectedObject = tree.get("selectedItems")[0];
    if(!selectedObject) {
        return alert("No object selected");
    }

    // add a new child item
    var childItem = {
        name: "New child",
        id: Math.random()
    };

    governmentStore.put(childItem, {
        overwrite: true,
        parent: selectedObject
    });
});

我们可以使用同样的方法移除子节点。我们也可以改变对象的属性，如name。下面我们将监听双击事件弹出输入框获取一个新name：

tree.on("dbclick", function(object) {
    object.name = propmt("Enter a new name for the object");
    governmentStore.put(object);
}, true);

最后，我们来看完整代码：

require([
    "dojo/aspect",
    "dojo/json",
    "dojo/query",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dijit/Tree",
    "dijit/form/Button",
    "dijit/tree/ObjectStoreModel",
    "dijit/tree/dndSource",
    "dojo/text!./data/all.json",
    "dojo/domReady!"
], function(aspect, json, query, Memory, Observable, Tree, Button, ObjectStoreModel, dndSource, data) {

    var governmentStore = new Memory({
        data: json.parse(data),
        getChildren: function(object) {
            return this.query({parent: object.id});
        }
    });

    aspect.around(governmentStore, "put", function(originalPut) {
        return function(obj, options) {
            if(options && options.parent) {
                obj.parent = options.parent.id;
            }
            return originalPut.call(governmentStore, obj, options);
        }
    });

    governmentStore = new Observable(governmentStore);

    var model = new ObjectStoreModel({
        store: governmentStore,
        query: {id: "root"}
    });

    var tree = new Tree({
        model: model,
        dndController: dndSource
    }, "tree");
    tree.startup();

    var addBtn = new Button({
        label: "Add Child"
    }, "add-new-child");
    addBtn.startup();
    addBtn.on("click", function() {
        var selectedObject = tree.get("selectedItems")[0];
        if(!selectedObject) {
            return alert("No object selected");
        }

        var childItem = {
            name: "New child",
            id: Math.random()
        };

        governmentStore.put(childItem, {
            overwrite: true,
            parent: selectedObject
        });
    });

    var removeBtn = new Button({
        label: "Remove"
    }, "remove");
    removeBtn.startup();
    removeBtn.on("click", function() {
        var selectedObject = tree.get("selectedItems")[0];
        if(!selectedObject) {
            return alert("No object selected");
        }
        governmentStore.remove(selectedObject.id);
    });

    tree.on("dblclick", function(object) {
        var newName = prompt("Enter a new name for the object");
        if(newName) {
            object.name = newName;
            governmentStore.put(object);
        }
    }, true);
});

由于拖拽的原因，任一节点都可能拥有子节点，故mayHaveChildren()方法应该返回false。因此我们去掉了自定义的mayHaveChildren()方法，使用默认的。

懒加载的Tree

当数据集合很大的时候，最好是能够按需从服务端获取节点数据（也叫懒加载），这要比直接一次性载入所有数据要优良。

第一步，同样的还是构建数据。现实中，数据常常存在数据库中且由像Perservere或CouchDB这样的REST-full服务提供。为了在实例中演示，我们把数据节点分开存在服务器上不同的文件中：

data/
    cabinet
    congress
    exec
    root

然后每个节点应该有个子节点列表（如列出子节点的name，而不是子节点的子节点）。所以，为Congress准备的数据命名为“congress”大体如下：

{
    "name": "Congress",
    "id": "congress",
    "children": [
        {
            "name": "House of Representatives",
            "id": "house"
 
        },
        {
            "name": "Senate",
            "id": "senate"
        }
    ]
}

接下来创建我们的store。它将驱动这个Tree。在这里我们将使用JsonRest store，可以帮助实现懒加载。下面是一个连接到我们服务器的JsonRest的实例代码：

require(["dojo/store/JsonRest"], function(JsonRest) {
    var usGov = new JsonRest({
        target: "data/congress",

        getChildren: function(object) {
            return this.get(object.id).then(function(fullObject) {
                return fullObject.children;
            });
        }
    });
});

getChildren()获取到如下的内容：

{
    "name": "Congress",
    "id": "congress",
    "children": true
}

所以为了得到子节点数据，它首先需要得到名为“congress”的文件：

{
    "name": "Congress",
    "id": "congress",
    "children": [
        {
            "name": "House of Representatives",
            "id": "house"
 
        },
        {
            "name": "Senate",
            "id": "senate"
        }
    ]
}

下面的代码来创建模型，tree和上面的那个类似：

require([
    "dojo/store/JsonRest",
    "dijit/Tree",
    "dijit/tree/ObjectStoreModel",
    "dojo/domReady!"
], function(JsonRest, Tree, ObjectStoreModel) {
    var usGov = new JsonRest({
        target: "http://192.168.0.87:3000/",

        getChildren: function(object) {
            return this.get(object.id).then(function(fullObject) {
                return fullObject.children;
            });
        }
    });

    var model = new ObjectStoreModel({
        store: usGov,
        getRoot: function(onItem) {
            this.store.get("root").then(onItem);
        },
        mayHaveChildren: function(object) {
            return "children" in object;
        }
    });

    var tree = new Tree({
        model: model
    }, "tree");
    tree.startup();
});

请注意我们添加另一个自定义个方法getRoot()。这是因为默认的ObjectStoreModel视图从服务器执行查询类获取根节点。因为我们模拟的是静态的文件，不能相应查询，所以我们重写了getRoot()方法，也就是取了全部数据。

使用client/server store实现动态更新与拖拽

支持使用client-server store实现像JsonRest那样的拖拽与动态更新是很复杂的，且超越了本教程所覆盖的范围。捆绑有dojo的JsonRest store还不太完善，因为那只是一个客户端的组件。还需要一个服务端提供数据。

你可以使用像Persevere这样的包来提供必须要的功能。如果你想实现自己的服务端的RESTful服务，那它应该具有以下功能：

1 检索一个单独的元素

使用JsonRest，检索一个元素常使用类路径的URL方式，如下：

http://server/data/root

然而，当ObjectStoreModel要获取Tree的根元素的时候，它用一个查询，JsonRest发起一个GET请求：

http://server/data?id=cabinet

将会返回以下内容：

[
    {
        "name": "Cabinet",
        "id": "cabinet"
    }
]

2 检索一个元素的子元素

如：

http://server/data?parent=cabinet

返回父节点为“cabinet”的子元素：

[
    {
        "name": "National Security Council",
        "id": "security"
    },
    {
        "name": "Council of Economic Advisers",
        "id": "economic"
    },
    {
        "name": "Office of Management and Budget",
        "id": "budget"
    }
]

 

3 变更通知

4 PUT与DELETE请求

最后服务器要有处理PUT与DELETE请求的能力，用于更新，插入，删除。

总结

Tree被设计的将表现与数据模型分离，一个新的store很容易可以被层级逻辑扩展来驱动这个Tree。Tree提供了很重的功能，如键盘导航与访问。另外，Tree与store相结合增加了强大的功能，包括懒加载，拖拽，对数据变更的实时响应。我们估计你去深入研究Tree的文档，以了解它更多的功能，如样式，自定义图标，API等。