javascript - Ember.js 路由器/ Controller 属性

Question

我正在尝试围绕 model 属性或路由与 Controller 的 content 属性进行比较。如果您在路由中设置 model 属性，这是否会自动将其设置为生成的 Controller 中的 content 属性。

此外，我认为 Controller 的 content 属性允许您访问模板中该对象的属性，是这样吗？

我阅读了文档，但仍然无法理解其中的一些约定。

Answer 1

如回答here , Ember.Route 有一个 model 函数，它允许您将一个对象或一组对象设置为该路由的模型。处理单个对象的路由应该有一个扩展 Ember.ObjectController 的 Controller ，而处理对象集合的路由应该有一个扩展 Ember.ArrayController 的 Controller 。随后，在 Route 工作流中，来自 model Hook 的数据通过 setupController 设置到 Controller 的 content 属性中> 钩子(Hook)。

路由有自己的工作流程来设置它们的 Controller ，因此默认情况下将调用此方法并使用模型填充内容。请考虑以下事项:

fiddle

App.Email = DS.Model.extend({
    address: DS.attr('string'),
    isActive: DS.attr('boolean')
});

App.Router.map(function() {
    this.resource('emails', function() {
        this.route('email', {path: ':email_id'});
    });
});

App.EmailsRoute = Ember.Route.extend({
    model: function() {
        return App.Email.find();
    }
});
App.EmailRoute = Ember.Route.extend({
    model: function(params) {
        return App.Email.find(params.email_id);
    }
});

App.EmailsController = Ember.ArrayController.extend();
App.EmailController = Ember.ObjectController.extend();

框架应该为这些路由生成默认代码，以便设置 Controller ，它看起来像这样(如果需要，您可以覆盖):

App.EmailsRoute = Ember.Route.extend({
    ...
    setupController: function(controller, model) {
        controller.set('content', model);
    }
    ...
});

在某些情况下(请参阅上面链接的问题/答案)，您可能需要/想要重写这些方法以执行与默认功能不同的操作，例如:

fiddle

App.EmailsRoute = Ember.Route.extend({
    model: function(params) {
        return [{id: 1, address: 'other@email.com'}];
    },
    setupController: function(controller, model) {
        // here, controller is whatever controller this route needs
        // by conventions, it knows it should be EmailsController
        // of the type ArrayController
        // model is whatever was returned by the model function above

        // the content is a "bag" which can be filled with a model or any
        // other object you need. Just keep in mind your view layer will
        // be referring to this object later on
        controller.set('content', model);

        // you can set other properties of the controller here too
        controller.set('applyFilter', true);
    }
});

现在模板将能够访问 Controller 中的数据。下面的示例循环访问 EmailsController 中的对象集合 (App.Email)。此集合或其子对象中的任何公共(public)属性都可以在这里访问，一个示例是 {{email.address}}:

<script type="text/x-handlebars" data-template-name="emails">
    <ul>
    {{#each email in controller}}
        <li>
            {{#linkTo emails.email email}}
                {{email.address}}
            {{/linkTo}}
        </li>    
    {{/each}}
    </ul>
    {{outlet}}
</script>

请注意，模板不是直接与模型对话，而是与分配有模型数据的内容 对话。正如我所说，您可以通过路由将任何对象存储在内容或模型中，因此您不必使用 DS.Model，架构也不是强耦合的。

如果这个模型，而不是 App.Email 类型，有不同的类型和不同的属性，它也可以在这里访问，但有限制。如果模型的属性是一个集合，则无法通过索引访问它(例如 {{email.messages[0].body}} 不起作用)。在这种情况下，最好的做法是在 Controller 中使用一个计算属性，它可以让您直接访问电子邮件消息集合的第一项(如果有的话)。