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，但我不确定这是否正确。我在控件中唯一拥有的是创建，删除和销毁节点，实际上我只是想获取节点列表。它将基于节点模型，它位于一个单独的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获取模型，因为它们不是索引的父级。所以我必须在索引中设置模型才能使其工作。如果我在nodes/index.js函数中使用var controller = this.controllerFor('nodes/index');，然后使用controller: controller，我似乎无法以这种方式访问我的renderTemplate()控制器。这意味着我必须将我的动作移动到一个单独的控制器（这可能是正确的方法），以便在我的小部件中访问它们。但我希望能够为其他路线访问相同的操作，我不希望在我的应用程序中重复这些操作。

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

Ember.js -Render在具有自己的控制器

1 个答案: