EmberJS:如何在同一条路线上加载多个模型? [英] EmberJS: How to load multiple models on the same route?

问题描述

虽然我对 Web 开发并不陌生，但我对客户端 MVC 框架还是很陌生.我做了一些研究，并决定尝试使用 EmberJS.我浏览了 TodoMVC 指南，这对我来说很有意义...

While I am not new to web development, I am quite new to to client-side MVC frameworks. I did some research and decided to give it a go with EmberJS. I went through the TodoMVC guide and it made sense to me...

我已经设置了一个非常基本的应用程序；索引路由，两个模型和一个模板.我有一个服务器端 php 脚本正在运行，它返回一些 db 行.

I have setup a very basic app; index route, two models and one template. I have a server-side php script running that returns some db rows.

让我非常困惑的一件事是如何在同一路线上加载多个模型.我已经阅读了一些关于使用 setupController 的信息，但我仍然不清楚.在我的模板中，我有两个表，我试图用不相关的数据库行加载它们.在更传统的 Web 应用程序中，我只会向 sql 语句发出并循环它们以填充行.我很难将这个概念翻译成 EmberJS.

One thing that is very confusing me is how to load multiple models on the same route. I have read some information about using a setupController but I am still unclear. In my template I have two tables that I am trying to load with unrelated db rows. In a more traditional web app I would have just issued to sql statements and looped over them to fill the rows. I am having difficulty translating this concept to EmberJS.

如何在同一路径上加载多个不相关数据模型?

我使用的是最新的 Ember 和 Ember 数据库.

I am using the latest Ember and Ember Data libs.

虽然第一个答案给出了处理它的方法，但第二个答案解释了何时合适以及何时不合适的不同方法.

although the first answer gives a method for handling it, the second answer explains when it's appropriate and the different methods for when it isn't appropriate.

推荐答案

注意:对于 Ember 3.16+ 应用程序，这里是相同的代码，但更新了语法/模式:https://stackoverflow.com/a/62500918/356849

NOTE: for Ember 3.16+ apps, here is the same code, but with updated syntax / patterns: https://stackoverflow.com/a/62500918/356849

以下内容适用于 Ember <3.16，尽管代码可以像 3.16+ 一样完全向后兼容，但编写旧代码并不总是很有趣.

The below is for Ember < 3.16, even though the code would work as 3.16+ as fully backwards compatible, but it's not always fun to write older code.

您可以使用 Ember.RSVP.hash 来加载几个模型:

You can use the Ember.RSVP.hash to load several models:

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      people: this.store.findAll('person'),
      companies: this.store.findAll('company')
    });
  },

  setupController(controller, model) {
    this._super(...arguments);
    Ember.set(controller, 'people', model.people);
    Ember.set(controller, 'companies', model.companies);
  }
});

在你的模板中你可以参考people和companys来获取加载的数据:

And in your template you can refer to people and companies to get the loaded data:

app/templates/index.js

<h2>People:</h2>
<ul>
  {{#each people as |person|}}
    <li>{{person.name}}</li>
  {{/each}}
</ul>
<h2>Companies:</h2>
<ul>
  {{#each companies as |company|}}
    <li>{{company.name}}</li>
  {{/each}}
</ul>

这是一个带有此示例的 Twiddle:https://ember-twiddle.com/c88ce3440ab6201b8d58

This is a Twiddle with this sample: https://ember-twiddle.com/c88ce3440ab6201b8d58

这篇关于EmberJS:如何在同一条路线上加载多个模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！