ember - 在路由中加载模型数据以进行功率排序？

Question

我现在有一个非常简单的设置。我有一个有名字和作者的图书模型。我正在尝试创建一个简单的表单来创建一本新书。对于作者，我使用 power select 从作者模型中加载作者。设置的表单如下所示：

<form {{action "save" on="submit"}}>
    {{input value=model.title placeholder="Title"}}<br>

    {{#power-select class="select"
        selected=model.author
        options=authors
        onchange=(action (mut model.author)) as |author|}}
        {{author.name}}
    {{/power-select}}

    <input type="submit" value="Save">
</form>

但是，我在设置路线以使其正常工作时遇到了麻烦。到目前为止，没有作者出现在选择中，即使有作者存储在我的数据库中。我的路线如下所示：

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.createRecord('book');
    },
    actions: {
        save() {
            this.modelFor(this.routeName).save();
        }
    },

    store: Ember.inject.service(),
    authors: Ember.computed({
        get() {
            return this.get('store').findAll('author');
        }
    }).readOnly()
});

首先，我应该如何在书籍/新路线的路线中正确加载作者模型中的数据？其次，我应该在路线上这样做吗？从我读过的内容和人们告诉我的内容来看，加载模型数据应该在路线中完成。

Answer 1

将authors属性移动到对应的控制器。

另外你不需要添加readonly。

所以在控制器中：

  authors: Ember.computed(function(){
                return this.get('store').findAll('author');        
})

用于在路线中加载模型。是的，您应该在路由中加载将作为资源操纵的模型。所以现在你做对了。

Answer 2

1) 在路由模型钩子内使用Ember.RSVP.hash

你的路由文件-> 我假设是 books/new.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.RSVP.hash({
            newBook : this.store.createRecord('book'),
            authors : this.store.findAll('author')          
        });
    },
    actions: {
        save() {
            this.modelFor(this.routeName).newBook.save(); 
        }
    }    
});

在模板内部，您可以使用model.authors 访问authors。和title 使用model.newBook.title

<form {{action "save" on="submit"}}>
    {{input value=model.newBook.title placeholder="Title"}}<br>

    {{#power-select class="select"
        selected=model.newBook.author
        options=model.authors
        onchange=(action (mut model.newBook.author)) as |author|}}
        {{author.name}}
    {{/power-select}}

    <input type="submit" value="Save">
</form> 

2) 就像 ebrahim 建议的那样，您可以在所需的控制器中使用以下代码，

authors: Ember.computed(function(){
           return this.store.findAll('author');        
})

3）由于作者模型数据将成为作者、书籍、书籍的共享数据模型。新路线。这样您就可以继续使用它并从所有必需的路径访问它。

authors-service.js -> 服务中

import Ember from 'ember';

export default Ember.Service.extend({
  store:Ember.inject.service(),
  authors: undefined,
  init(){
   this._super(...arguments);
   this.get('store').findAll('author', { reload: true }).then(function(results){
        this.set('authors',results); //As this is going to be  Ember.enumerables, you can iterate and get the data.
    });
 }
});

您可以通过注入在任何地方从authors-service.js 访问authors authorsService:Ember.inject.service()。我想在你的情况下，你需要为books/new.hbs模板创建控制器books/new.js，

books/new.js -> 控制器文件

import Ember from 'ember';

export default Ember.Controller.extend({  
  authorsService:Ember.inject.service(),
  authors: Ember.computed.alias('authorsService.authors');
});

在 books/new.hbs 模板中，您可以访问 authors 属性。