javascript - 在 Ember.js 中访问多个装置的数据

Question

注意:我想对于有 Ember 经验的人来说这将是一个 super 简单的问题。不要被我问题的长度吓倒。如果您不想阅读所有开销，请跳到底部。

开销

我的公司即将开展一个项目，需要使用前端技术来完成我本来希望使用 PHP 完成的任务。

我们研究了几种不同的 JavaScript 框架，我们一致同意的解决方案是 Ember.js。

我按照他们网站上的 TodoMVC 教程学习了非常基础的知识。

在这个项目中，我们将使用 AJAX 请求在应用程序启动时提取数据，然后将所有内容放入固定装置中。

我很难弄清楚如何同时将多个灯具传递到我的模板中。我首先添加了两个固定装置。以下是他们的数据和定义:

App.Students = DS.Model.extend({
    first: DS.attr('string'),
    last: DS.attr('string'),
    classes: DS.hasMany('ClassGroup')
});

App.ClassGroup = DS.Model.extend({
    className: DS.attr('string'),
    isActive: DS.attr('number'),
    students: DS.hasMany('Students',{ async: true })
});

App.ClassGroup.FIXTURES = [
    {
        id: 1,
        className: 'Class 1',
        isActive: 1,
        students: [1, 2]
    },
    {
        id: 2,
        className: 'Class 2',
        isActive: 0,
        students: [2]
    }
];

App.Students.FIXTURES = [
    {
        id: 1,
        first: 'Student',
        last: 'One',
        classes: [1]
    },
    {
        id: 2,
        first: 'Student',
        last: 'Two',
        classes: [1, 2]
    }
];

这只是一个非常简单的实现。实际数据会有几十种关系，但为了学习这个框架，我已经简化了一些事情。

以下是我目前设置路由器的方式:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('ClassGroup');
    }
});

这样做允许我使用 {{#each model}} 以及类似 {{className}} 的内容通过 Handlebars 访问数据 来访问它的数据成员。我还可以通过嵌套另一个each语句(例如{{#each Students}})来跳转到students数组。

但是，我不知道如何获取多个进入点到我的数据中。例如，通过路由器传递ClassGroup，我无法单独访问Students固定装置；我必须首先循环遍历 ClassGroup，然后从那里访问学生。

同样，如果我更改路由器以传入学生装置，我可以循环遍历学生，然后通过嵌套的each语句跳转到类，但我失去了简单地循环遍历所有类列表的能力.

有没有办法可以将所有灯具传递到模板中？我以正确的方式处理这个问题吗？

长话短说

如何将我的所有灯具一次传递到模板中，以便我可以访问我的学生数组或类(class)数组？我如何访问所述夹具数据(即，如果我想显示 ID 为 2 的学生的名字，在 PHP 等语言中表示为 Students[2]['first']，如何使用 Handlebars 来完成此操作) ？

Answer 1

没错，模板只能访问 Controller 传递给它的内容。在这种情况下，由于您没有显式设置 Controller ，并且模型是一个数组，因此它将是一个数组 Controller ，因此您可以执行 {{#each}} 进行迭代在 ClassGroups 上(实际上你甚至不需要model)。您没有在任何地方显式传入 students 数组，也没有在 Controller 中创建它，因此您无权在模板中访问它。幸运的是，Ember 有一个 setupController 路由钩子(Hook)，它正是做这种事情的。在您的示例中:

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('ClassGroup');
    },
    setupController: function(controller, model){
        this._super(controller, model);
        controller.set('students', this.store.find('Students'));
    }
});

现在，您的 Controller 和模板上将有一个可用的 students 属性。