引用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,但是当我想要包含我的资源文件夹中的任何内容时,我肯定不会期望我这样做,是吗？

Answer 1

选项1:reopen控制器/组件类

最简单的方法是向reopen所有控制器/组件添加属性.如果执行此操作,则可以rootURL在任何模板中使用,无需进行其他更改.

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

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

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

选项2:控制器/组件继承

如果您想限制更改的范围,您可以rootURL在基本控制器/组件中定义属性,如application.js:

import ENV from '../config/environment'

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

然后在其他控制器/组件中,扩展该基类并rootUrl在相应的模板中工作:

import ApplicationController from 'application';

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

选项3:控制器/组件混合

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

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

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

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

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

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