在Ember中基于关系访问异步加载的对象

Accessing asynchronously loaded object based on relations in Ember

本文关键字：访问 异步 加载 对象 关系 Ember 于关系      更新时间：2023-09-26

我在Ember中有一个异步加载模型的麻烦。我以为我已经了解了整个"背景烬魔法"，但我没有。

我有两个模型，比如foo和boo，它们具有这些属性:

foo: category: DS.belongsTo("boo", { async: true })

boo color: DS.attr("string")

在我的路由中，我加载了所有foo s:

model: function(params) {
        return this.store.findAll("task", "");
    },

在我的模板中，我渲染了一个组件:{{my-component model=model}}。在组件的代码中，我需要将模型转换为另一种形式，所以我有:

final_data: function() {
        this.get("model").forEach(function(node) {
            console.log(node.get("category"));
        });
        return {};
    }.property("model"),

当我尝试访问模型中的"category"时，我的代码崩溃了:

EmberError@http://localhost:4200/assets/vendor.js:25705:15
ember$data$lib$adapters$errors$$AdapterError@http://localhost:4200/assets/vendor.js:69218:7
ember$data$lib$adapters$rest$adapter$$RestAdapter<.handleResponse@http://localhost:4200/assets/vendor.js:70383:16
ember$data$lib$adapters$rest$adapter$$RestAdapter<.ajax/</hash.error@http://localhost:4200/assets/vendor.js:70473:25
jQuery.Callbacks/fire@http://localhost:4200/assets/vendor.js:3350:10
jQuery.Callbacks/self.fireWith@http://localhost:4200/assets/vendor.js:3462:7
done@http://localhost:4200/assets/vendor.js:9518:1
.send/callback@http://localhost:4200/assets/vendor.js:9920:8

在我看来，烬没有加载boo s。我应该如何访问他们的权利，使Ember加载他们?

正在尝试加载category，但适配器遇到一些错误。从你的例子中看不出来。

检查网络选项卡

当你从模板访问异步关联时，Ember知道该怎么做。从代码(例如组件的逻辑)中，Ember不知道它需要检索关联，直到您尝试get它。get将触发加载，但将返回一个promise。你可以这样做:

get_final_data: function() {
  Ember.RSVP.Promise.all(this.get("model") . map(node => node.get('category')) 
    .then(vals => this.set('final_data', vals));
}

我相信您可以看到，这为每个节点的类别创建了一个承诺数组，调用Promise.all等待它们全部完成，然后将结果存储到final_data属性中。

注意，这不是一个计算属性;这是一个函数/方法，必须在某个时候调用，也许在afterModel。

相关文章：