EmberJS配置prod img src url

时间:2016-04-19 18:34:11

标签: javascript ember.js ember-data handlebars.js ember-cli

 Ember      : 1.13.6
 Ember Data : 1.13.7

我需要能够设置全局属性并在我的.hbs文件中使用它。让我们说生产我需要从另一台服务器提供图像,但在本地开发它们可以相对于项目被切断。

<img src="{{imgSrc}}/spinner.gif" alt="Loading..."/>

如何设置全局属性或配置并在我的.hbs文件中使用它?

1 个答案:

答案 0 :(得分:0)

这是我能够提出的似乎有用的但不知道这是否是一个“好主意”。

config / environment.js - 为envs设置可配置的imgSrc属性

module.exports = function(environment) {
  var ENV = {
    //...

    APP : {
      imgSrc: '/prod/path/to/assets/'
    }

    //...
  };

  if (environment === 'development') {
    ENV.APP.imgSrc = 'assets/images/';
  }

app.js - 在应用

中提供imgSrc属性
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';

var App;

//...

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver,
  imgSrc: config.APP.imgSrc
});

//...

export default App;

----- 创建名为img-src 的组件-----

<强>模板/组件/ IMG-src.hbs

<img src="{{imgSrc}}{{image}}" alt="{{alt}}"/>

<强>组件/ IMG-src.js

import Ember from 'ember';

export default Ember.Component.extend({
   tagName: 'div',
   imgSrc: myApp.imgSrc
});

hbs组件使用

{{img-src image="spinner.gif" alt="Loading..."}}

这是否正确?