javascript - ember.js，在 Controller 中过滤 PromiseManyArray

Question

我正在尝试定义一个由过滤的 hasMany 关系组成的计算属性。当我循环 PromiseManyArray 的项目时，在尝试访问我想要过滤的属性时，我得到 undefined 。在稍后调用此计算属性时，一切正常。

这是我的 Controller 代码的简化版本:

export default Ember.Controller.extend({

    availableModules: function () {
        let thisModule = this.get('model')

        console.log(thisModule.get('library.modules')) // This logs <DS.PromiseManyArray:ember604>

        // loop over siblings
        return thisModule.get('library.modules').filter(mod => {
            // mod.classification is undefined
            return mod.get('classification') !== 'basis'
        })

   }.property('model')
})

对于 Module 模型，我们可以假设它具有 classification 属性，并且它属于 Library 对象，并且 Library 模型hasMany 模块。

我尝试过类似的方法，它正确记录了属性classification，但我不知道如何返回任何内容以便模板可以渲染它。

availableModules: function () {
    let thisModule = this.get('model')

    thisModule.get('library.modules').then(mods => {
        mods.forEach(mod => {
            console.log(mod.get('classification'))
        })
    })
}.property('model')

所以问题似乎是在 PromiseManyArray.filter 方法内部，找到的对象的属性尚未解析...我如何创建一个将返回所有过滤对象的 promise 一旦这些问题得到解决？我不知道如何解决这个问题。谢谢。

Answer 1

受到 Bloomfield 评论的启发，并在 this thread in the ember forum 的帮助下，我找到了一个可以接受的解决方案。基本上它包括解析路由中的所有关系，这样当调用 Controller 时，您就不必处理 Promise。

解决方案:

1. 在路由的 model Hook 中，返回所有所需信息的 Promise 哈希
2. 定义一个自定义setupController，并在其中将模型和额外数据存储在 Controller 中

路由代码如下所示:

export default Ember.Route.extend({
    model(params) {
        let module = this.store.findRecord('module', params.mod_id)

        return Ember.RSVP.hash({
            module: module,
            siblingModules: module.then(mod => mod.get('library.modules')),  // promise based on previous promise
        })
    },

    setupController(controller, hash) {
        controller.set('model', hash.module)
        controller.set('siblingModules', hash.siblingModules)
    },
})

注意:为了使路由仍然正常工作，{{#link-to 'route' model}} 必须显式使用一个属性，例如 id :{{#link-to 'route' model.id}}

额外信息

Bloomfield 的方法包括使用 afterModel Hook 将额外数据加载到 Route 对象的属性中，然后加载到 setupController ，在Controller中设置额外的数据。像这样的事情:

export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord('module', params.mod_id)
    },

    afterModel(model) {
        return model.get('library.modules').then(modules => {
            this.set('siblingModules', modules)
        })
    },

    siblingModules: null,  // provisional store

    setupController(controller, model) {
        controller.set('model', model)
        controller.set('siblingModules', this.get('siblingModules'))
    },
})

但这感觉就像是黑客攻击。您必须在 afterModel 中返回一个 Promise，但您无法访问结果。相反，结果必须通过 .then 访问，然后存储在 Route` 对象中......这不是一个很好的信息流。不过，这样做的优点是您不必为模板中的链接指定任何属性。

还有更多选项，例如使用 PromiseProxyArray，但这对于像我这样的新手来说太复杂了。