开销

我的公司有一个项目即将到来，需要使用前端技术来完成我本来喜欢用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}}通过 Handlebars 访问数据，然后使用{{className}}之类的内容访问数据成员。我也可以通过嵌套另一个语句{{#each students}}来跳转到学生数组。

但是，我无法弄清楚如何在我的数据中输入多个入口点。例如，通过路由器传递 ClassGroup ，我无法自行访问 Students fixture。我必须首先遍历 ClassGroup ，然后从那里访问学生。

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

有没有办法可以将所有灯具都传递到模板中？我是以正确的方式来做这件事吗？

长话短说

如何将我的灯具中的所有一次传递到模板中，以便我可以访问我的学生数组或我的类数组？如何访问所述夹具数据（即，如果我想显示ID为2的学生的名字，用PHP这样的语言表示为学生[2] [＆＃39; first＆＃39;]，这怎么可以用把手做完？）

Answer 1

没错，模板只能访问Controller传递的内容。在这种情况下，由于您没有显式设置控制器，并且模型是一个数组，它将是一个数组控制器，因此您可以{{#each}}迭代ClassGroups（您实际上不是'甚至需要model）。您没有明确地传递students数组，也没有在控制器中创建它，因此您无法在模板中访问它。幸运的是，Ember有一个setupController路由钩子，它完全可以做到这一点。在您的示例中：

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'));
    }
});

现在您的控制器上有students属性，因此您的模板可用。

从Ember.js中的多个灯具访问数据

开销

长话短说

1 个答案: