ember.js - 引用 rootURL/hbs 中的任何绝对路径

Question

ember-cli 生成的 index.html 文件包含这一行

<script src="{{rootURL}}assets/vendor.js"></script>

和 rootURL分别替换为来自 environment.js 的值(只是 '/' 正在开发中)。

现在我想在一个组件中包含一个图标(实际上，一个仅用于 partial 的模板)用于不同的路由(也在不同的嵌套级别)，但是

<img src="{{rootURL}}assets/img/some_logo.svg">

只是不能解决问题- rootURL为空，与 environment.js 中定义的任何其他字符串一样.

我想我可以创建一个类文件， import ENV from '../config/environment'并定义 rootURL: ENV.rootURL ，但肯定 ember 不希望我在我想要包含 Assets 文件夹中的任何内容的地方这样做，是吗？

Answer 1

选项 1:reopen Controller /组件类

最简单的方法是reopen为所有 Controller /组件添加一个属性。如果你这样做，你可以使用 rootURL在任何模板中，无需其他更改。

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

Ember.Controller.reopen({
  rootUrl: ENV.rootURL,
});

Ember.Component.reopen({
  rootUrl: ENV.rootURL,
});

选项 2: Controller /组件继承

如果您想限制更改的范围，您可以定义 rootURL基本 Controller /组件(如 application.js)中的属性:

import ENV from '../config/environment'

export default Ember.Controller.extend({
  rootURL: ENV.rootURL,
});

然后在您的其他 Controller /组件中，扩展该基类和 rootUrl将在相应的模板中工作:

import ApplicationController from 'application';

export default ApplicationController.extend({
  // controller definition
});

选项 3: Controller /组件混合

您可以将此功能混合到您想要拥有的每个 Controller 或组件中，而不是使用继承 rootURL .首先定义 Mixin:

// mixins/with-root.js
import Ember from 'ember';
import ENV from '../config/environment';

export default Ember.Mixin.create({
  rootURL: ENV.rootURL,
});

在要使用的任何组件/ Controller 中使用 Mixin rootURL在模板中:

import Ember from 'ember';
import WithRootMixin from '../mixins/with-root';

export default Ember.Controller.extend(WithRootMixin, {
  // controller definition
});