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

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：控制器/组件混合

您可以将此功能混合到您希望拥有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的任何组件/控制器中使用Mixin：

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

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

Answer 2

如果您的rootURL在生产环境中只是/，则可以将图片标记修改为：

<img src="/assets/img/some_logo.svg">

否则我想你应该为broccoli-asset-rev使用prepend选项，但我从未尝试过：

var app = new EmberApp(defaults, {
  // Add options here
  fingerprint: {
    prepend: 'https://cdn.example.com/'
  }
});

有关baseURL弃用的官方博客文章：http://emberjs.com/blog/2016/04/28/baseURL.html

引用rootURL / hbs中的任何绝对路径

2 个答案: