Emberjs 控制器接收 Route 的 model() 方法的返回值？

Question

我正在开发 Ember 2.13.0

控制器的 Ember.js 文档显示“The controller receives a single property from the Route – model – which is the return value of the Route's model() method.”。

我不清楚如何访问这些数据。

我的路线如下所示：

export default Ember.Route.extend({
    model: function() {
      return this.store.findAll('costcentrehierarchyfortree');
    }
});

还有一个看起来像这样的控制器：

export default Ember.Controller.extend({
    data: function() {
            var arrJSTreeElements = this.model.map(obj =>{ 
                /*
                 * This is the type of structure that needs to be output
                 *
                [
                    { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
                    { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
                    { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
                    { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
                ]
                */
                var rObj = {};
                rObj['id'] = obj.cchcceidchild;
                if (obj.cchcceidparent === obj.cchcceidchild)
                {
                    //This is the top of the tree
                    rObj['parent'] = "#";
                }
                else
                {
                    rObj['parent'] = obj.cchcceidparent;
                }
                rObj['text'] = obj.ccidescriptionchild;
                return rObj;

            });
            return arrJSTreeElements ;
    }
});

但是当我访问有问题的路线时，我得到一个控制台错误

Cannot read property 'map' of undefined

所以我猜想使用this.model 访问从路由的 model() 方法返回的数据不是要走的路……那我做错了什么？

提前致谢。

---

编辑： 只是为了让我在这里尝试做的更清楚一点，您可以在我正在使用的插件的演示应用中看到一个（有点）类似的示例。这是控制器https://github.com/ritesh83/ember-cli-jstree/blob/master/tests/dummy/app/dynamic/controller.js，这是模板https://github.com/ritesh83/ember-cli-jstree/blob/master/tests/dummy/app/dynamic/template.hbs。

不幸的是，这不是一个直接的例子，因为它依赖于静态文件而不是由于调用路由而返回的数据，但它至少给出了一些想法。

---

编辑 2：

在 Lux 和我找到的其他资源的帮助下，我得以完成这项工作。

如果这对任何人都有帮助，这是我最终使用的版本并且有效。请注意，处理不再在控制器上，而是在路由上

import Ember from 'ember';

export default Ember.Route.extend({

    model: function() {
        return this.store.findAll('costcentrehierarchyfortree');
    },

    setupController(controller, model) {
        this._super(controller, model);        
        //
        this.store.findAll('costcentrehierarchyfortree').then(function (arrRawCch) {
            var idx = 0;
            var arrJSTreeElements = arrRawCch.map(obj =>{ 
                idx++;
                var rObj = {};
                rObj['id'] = obj.get('cchCceIdChild');
                if (obj.get('cchCceIdParent') === obj.get('cchCceIdChild'))
                {
                    //This is the top of the tree
                    rObj['parent'] = "#";
                }
                else
                {
                    rObj['parent'] = obj.get('cchCceIdParent');
                }
                rObj['text'] = obj.get('cceIdentifierChild');
                //
                // Add non-jstree-standard data into 'data' object
                // see this forum post for more details
                // https://groups.google.com/forum/#!topic/jstree/qBM2ZCAkPL4
                //
                rObj['data'] = {};
                rObj['data']['cchDrvId'] = obj.get('cchDrvId');
                //
                return rObj;
            });

            Ember.set(controller, 'data', arrJSTreeElements)
        });
    },
});

Answer 1

首先，您何时/如何调用data 函数？因为这样的功能在 ember 世界中似乎有点奇怪。我会将这段代码实现为computed property。

那么你确定这段代码在路由器进入路由之后运行吗？请注意，路由器等待model 钩子返回的承诺，并在将模型提供给控制器之前等待来自afterModel 钩子的承诺。因此，请确保您的函数不会过早运行。

也是的，你做错了。不应使用this.model。通常不应该使用点符号来访问 ember 对象的属性。 （注意：这仅在 ember 3.1 之前是正确的，在当前发布的测试版中 does introduce ES5 Getters for Computed Properties）。

您应该使用Ember.get 或obj.get：

// legazy import
import Ember from 'ember';
const {get} = Ember;

// import with modules syntax when using ember-cli-babel >= 6.8.0, introduced with ember 2.16
import {get} from '@ember/object'  

// use of .get to access a property. obj might be this or any other ember object. This will work for ember objects and non ember objects.
get(obj, 'foo')

// if obj is an ember object you can also use .get, but this will throw for non ember objects
obj.get('foo')