参考 rootURL / hbs 中的任何绝对路径
Reference rootURL / any absolute path in hbs
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
中定义的任何其他字符串一样。
我想我可以创建一个 class 文件,import ENV from '../config/environment'
并定义 rootURL: ENV.rootURL
,但肯定 ember 不希望我在任何我想包含的地方这样做我的资产文件夹中的任何内容,是吗?
如果您的 rootURL
也只是 /
在生产环境中,您可以将图像标签修改为:
<img src="/assets/img/some_logo.svg">
否则我想你应该为 broccoli-asset-rev 使用前置选项,但我从未尝试过:
var app = new EmberApp(defaults, {
// Add options here
fingerprint: {
prepend: 'https://cdn.example.com/'
}
});
关于 baseURL 弃用的官方博客 post:http://emberjs.com/blog/2016/04/28/baseURL.html
选项 1: reopen
Controller/Component classes
最简单的方法是reopen
给所有Controllers/Components加一个属性。如果这样做,您可以在任何模板中使用 rootURL
,无需进行其他更改。
import Ember from 'ember';
import ENV from '../config/environment'
Ember.Controller.reopen({
rootUrl: ENV.rootURL,
});
Ember.Component.reopen({
rootUrl: ENV.rootURL,
});
选项 2:Controller/Component继承
如果您想限制更改的范围,您可以在基础 controller/component 中定义一个 rootURL
属性,例如 application.js:
import ENV from '../config/environment'
export default Ember.Controller.extend({
rootURL: ENV.rootURL,
});
然后在您的另一个 controllers/components 中,扩展该基础 class 和 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,
});
在任何 Component/Controller 模板中要使用 rootURL
的地方使用 Mixin:
import Ember from 'ember';
import WithRootMixin from '../mixins/with-root';
export default Ember.Controller.extend(WithRootMixin, {
// controller definition
});
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
中定义的任何其他字符串一样。
我想我可以创建一个 class 文件,import ENV from '../config/environment'
并定义 rootURL: ENV.rootURL
,但肯定 ember 不希望我在任何我想包含的地方这样做我的资产文件夹中的任何内容,是吗?
如果您的 rootURL
也只是 /
在生产环境中,您可以将图像标签修改为:
<img src="/assets/img/some_logo.svg">
否则我想你应该为 broccoli-asset-rev 使用前置选项,但我从未尝试过:
var app = new EmberApp(defaults, {
// Add options here
fingerprint: {
prepend: 'https://cdn.example.com/'
}
});
关于 baseURL 弃用的官方博客 post:http://emberjs.com/blog/2016/04/28/baseURL.html
选项 1: reopen
Controller/Component classes
最简单的方法是reopen
给所有Controllers/Components加一个属性。如果这样做,您可以在任何模板中使用 rootURL
,无需进行其他更改。
import Ember from 'ember';
import ENV from '../config/environment'
Ember.Controller.reopen({
rootUrl: ENV.rootURL,
});
Ember.Component.reopen({
rootUrl: ENV.rootURL,
});
选项 2:Controller/Component继承
如果您想限制更改的范围,您可以在基础 controller/component 中定义一个 rootURL
属性,例如 application.js:
import ENV from '../config/environment'
export default Ember.Controller.extend({
rootURL: ENV.rootURL,
});
然后在您的另一个 controllers/components 中,扩展该基础 class 和 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,
});
在任何 Component/Controller 模板中要使用 rootURL
的地方使用 Mixin:
import Ember from 'ember';
import WithRootMixin from '../mixins/with-root';
export default Ember.Controller.extend(WithRootMixin, {
// controller definition
});