Ember.js -Render在具有自己的控制器的单独目录中的模板

Question

我不理解在另一个模板中呈现模板的正确方法。 我正在使用ember-cli 2.4.3。

我有我的route.js：

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
    location: config.locationType
});

Router.map(function() {
    this.route('index', {
        path: '/'
    });
    this.route('nodes', function() {
        this.route('detail', {
            path: '/:node_id'
        }
    });
    this.route('widgets', function() {
        this.route('node_list');
    });
});

export default Router;

我的index.js中有我的插座：

<!-- app/templates/index.hbs -->
{{outlet node_list}}

到目前为止，这是我在index.js路由中的内容：

// app/routes/index.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    renderTemplate: function() {
        this.render();
        this.render('index');
        this.render('widgets/project_list', {
            into: 'index',
            outlet: 'node_list',
            controller: 'nodes/index'
        });
    }
});

我试图引用的app/controllers/nodes/index.js是app/controllers/nodes/index.js ，但我不确定这是否正确。 我在控件中唯一拥有的是创建，删除和销毁节点，实际上我只是想获取节点列表。 它将基于节点模型，它位于一个单独的ember项目库中，可以通过nodes.js route访问：

// app/routes/nodes.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    store: Ember.inject.service(),
    session: Ember.inject.service(),
    model() {
        let user = this.modelFor('application');
        if (user) {
            return user.get('nodes');
        } else {
            return this.get('store').findRecord('user', 'me').then(user => user.get('nodes'));
        }
    }
});

我实际上在index.js路由中有更多，但我想要做的就是在app/widgets/node_list.hbs目录中渲染我的模板。 我很困惑renderTemplate实际应该在哪里（什么路由），以及让我的小部件显示在索引中的正确方法。 现在我没有得到任何内容来渲染，但路线显示在余烬检查器中。 我计划在索引中添加几个小部件，但我希望有人帮助我理解将这些“小部件”模板路由并呈现到另一个模板的正确方法。 提前致谢！

Answer 1

嗯，这是我发现的最好的：

// router.js:
import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
    location: config.locationType
});

Router.map(function() {
    this.route('index', {
        path: '/'
    });
    this.route('nodes', function() {
        this.route('detail', {
            path: '/:node_id'
        }
    });
});

export default Router;

// app/routes/index.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    store: Ember.inject.service(),
    session: Ember.inject.service(),
    model() {
        let user = this.modelFor('application');
        if (user) {
            return user.get('nodes'); // Fetch from `/users/me/nodes/`
        } else {
            return this.get('store').findRecord('user', 'me').then(user => user.get('nodes'));
        }
    },
    renderTemplate: function() {
        this.render();
        this.render('widgets/project_list', {
            into: 'index',
            outlet: 'node_list'
        });
    }
});

我没有以这种方式使用我的app/routes/nodes.js文件中的模型，并且基本上在我的应用程序中以这种方式设置模型两次。 据我所知，没有办法从node.js获取模型，因为它们不是索引的父级。 所以我必须在索引中设置模型才能使其工作。 如果我使用var controller = this.controllerFor('nodes/index');我也似乎无法以这种方式访问​​我的nodes/index.js控制器var controller = this.controllerFor('nodes/index'); ，然后controller: controller renderTemplate()函数中的controller: controller 。 这意味着我必须将我的动作移动到一个单独的控制器（这可能是正确的方法），以便在我的小部件中访问它们。 但我想要为其他路线访问相同的操作，我不希望在我的应用程序中重复。

我认为实现这一目标的最佳方法是将我的小部件构建为组件，而不是尝试为每个小部件创建单独的模板，然后在索引模板中呈现它们。 我打算尝试这个。