从 Ember 计算属性返回一个数组

Question

我有两个相关的模型 - 任务和需求。需求可以是 3 种类型（零件、工具、材料）之一。一个任务可以有多个需求，包括多个相同类型的需求。

Task A
    Requirement 1 (Part)
    Requirement 2 (Part)
    Requirement 3 (Tool)
    Requirement 4 (Material)
    Requirement 5 (Tool)

查看单个任务时，我想在一种摘要视图中按类型对需求列表进行分组。

Task A
    Parts Requirements (2)
    Tooling Requirements (2)
    Materials Requirements (1)

我有一个 computedProperty，主要在我的 TaskController 中运行，但我似乎无法让它返回我正在构建的需求摘要数组。两个模型的所有夹具数据都已正确设置（我可以迭代每个需求并在模板中显示它而没有问题）。

这里是模型

任务模型

App.Task = DS.Model.extend({
    name: DS.attr()
    requirements: DS.hasMany('requirement', { async: true})
});

需求模型

App.Requirement = DS.Model.extend({
    task_id: DS.belongsTo('task'),
    type: DS.attr(),
    description: DS.attr(),
    quantity: DS.attr()
})

这里是控制器：

App.TaskController

App.TaskController = Em.ObjectController.extend({
    requirementSummary: function () {
        var self = this,
            results = [];

        self.get('requirements').then(function(requirements) {

            var arrRequirements = requirements.get('content');

            var parts = {
                name: 'Parts',
                description: '',
                count: 0,
                css_class: 'fa-cog'
            },

            tools = {
                name: 'Tools',
                description: '',
                count: 0,
                css_class: 'fa-wrench'
            },

            materials = {
                name: 'Materials',
                description: '',
                count: 0,
                css_class: 'fa-tint'
            };

            arrRequirements.forEach(function (requirement) {
                if (requirement._data.name == 'Part') {
                    parts.description += requirement._data.description + ' (' + requirement._data.quantity + ')<br>';
                    parts.count++;
                } else if (requirement._data.name == 'Material') {
                    materials.description += requirement._data.description + ' (' + requirement._data.quantity + ')<br>';
                    materials.count++;
                } else if (requirement._data.name == 'Tooling') {
                    tools.description += requirement._data.description + ' (' + requirement._data.quantity + ')<br>';
                    tools.count++;
                }
            });

            if (parts.description !== '') {
                parts.description = parts.description.replace(/(<br>\s*)+$/);
            } else {
                parts.description = "No Parts requirements found";
            }

            if (materials.description !== '') {
                materials.description = materials.description.replace(/(<br>\s*)+$/);
            } else {
                materials.description = "No Materials requirements found";
            }

            if (tools.description !== '') {
                tools.description = tools.description.replace(/(<br>\s*)+$/);
            } else {
                tools.description = "No Tooling requirements found";
            }

            results.pushObject(parts);
            results.pushObject(tools);
            results.pushObject(materials);
        });

        return results;

    }.property()
});

目前它返回空的结果数组，因为它正在等待self.get 承诺履行。如果我返回 self.get('requirements').then(...) 的结果，那么它会返回 promise，而不是 results 数组，并且 Ember 不高兴，因为它不是数组。我想要的是它返回填充的结果数组。

我发现的最接近的问题是here，但它要么不能解决问题，要么我遗漏了一些东西。

Answer 1

您需要通过可观察模式使用requirementSummary，或者在它完成解析之后使用。

此外，由于要求已经是可迭代字段，因此不需要这样做：

  var arrRequirements = requirements.get('content');

你应该使用 getter 来获取属性，而不是去 ._data.property

  requirement.get('description')

将此添加到您的 task 模板中，您应该会看到它（异步）填充：

{{#each requirement in requirementSummary}}
   Name: {{requirement.name}} - Total: {{requirement.total}}
{{/each}}

Answer 2

所有路线似乎都和固定装置一样有效 - 我可以使用 {{#each requirement in requirements}} 并列出每个单独的要求，没有任何问题。只是有生成汇总属性并在计算后访问它的问题。

来自路由/application_routes.js

this.resource( 'tasks', function () {
    this.resource( 'task', { path: ':task_id' }, function () {
       this.resource( 'task_requirements', { path: 'requirements' } );
    } );
} );

来自路由/task_routes.js

// List Tasks
App.TasksRoute = Em.Route.extend({
    model: function () {
        return this.store.find('task');
    }
});

// Task Detail Route
App.TaskRoute = Em.Route.extend({
    model: function(params) {
        return this.store.find('task', params.task_id);
    }
});

// Task Requirements Route
App.TaskRequirementsRoute = Em.Route.extend({
    beforeModel: function () {
        this.set('task', this.modelFor('task'));
    }
});

夹具

// SAMPLE TASK FIXTURE.
App.Task.FIXTURES = [
    {
        "id": 1,
        "name": "Test Task #1",
        "description": "This is a test task. There are many like it but this one is mine.",
        "requirements": [ 1, 2, 3, 4 ]
    }
];

// SAMPLE REQUIREMENT FIXTURE
App.Requirement.FIXTURES = [
    {
        "id": 1,
        "task_id": 1,
        "type": "Part",
        "description": "This is a Part requirement",
        "quantity": 4
    },
    {
        "id": 2,
        "task_id": 1,
        "type": "Part",
        "description": "This is a Part requirement",
        "quantity": 1
    },
    {
        "id": 3,
        "task_id": 1,
        "type": "Material",
        "description": "This is a Material requirement",
        "quantity": 3
    },
    {
        "id": 4,
        "task_id": 1,
        "type": "Tool",
        "description": "This is a Tooling requirement",
        "quantity": 1
    }
];