Ember.js

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 路径访问：

// 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 实际上应该在哪里（什么路线）以及让我的小部件显示在索引中的正确方法感到困惑。现在我没有得到任何要呈现的内容，但路线显示在 ember 检查器中。我计划在索引中添加更多小部件，但我希望有人能帮助我了解将这些 'widget' 模板路由和呈现到另一个模板中的正确方法。提前致谢！

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');，然后在 renderTemplate() 函数中使用 controller: controller，我似乎也无法以这种方式访问我的 nodes/index.js 控制器。这意味着我必须将我的操作移动到一个单独的控制器（这可能是正确的做法），以便在我的小部件中访问它们。但我希望其他路由也能访问这些相同的操作，并且我不希望在我的应用程序中出现重复。

我认为最好的方法实际上是将我的小部件构建为组件，而不是尝试为每个小部件制作单独的模板，然后在索引模板中呈现它们。我要试试这个。

Ember.js - 在单独的目录中使用自己的控制器渲染模板

Ember.js -Render a template in separate directory with own controllers

javascript

routes

handlebars.js

ember-cli