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

ember-cli生成的index.html文件包括以下行

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

和rootURL分别替换为environment.js中的值(在develompent中只是'/')。

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

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

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

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

最佳答案

选项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 /组件继承

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

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 /组件混合

除了使用继承，您还可以将此功能混入要拥有rootURL的每个Controller或Component中。首先定义Mixin:

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

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

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

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

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

RootURL

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