Ember使用参数计算属性

时间:2013-12-10 16:31:26

标签: javascript ember.js

我想知道是否可以为计算属性添加参数。到目前为止,我尝试的所有内容都会导致错误,并且在此主题上没有发现我想使用未包含在我的模型中的值来构建URL。

我正在寻找看起来像这样的东西:

// App.js
App.Image = DS.Model.extend({
    image_path_sh: DS.attr(), // image.jpg
    image_size_nm: DS.attr(), // 234234
    image_alt_sh: DS.attr(), // My image
    image_abs_url: function(width, height) {
        return "http://localhost/images/" + this.get('image_path_sh') + "/" + width "x" + height
    }.property('image_path_sh')
});

// index.html
// I know this doesn't work, but I'd like to have something that easy to use
{{#each image}}
    <img src="{{image_abs_url 250 250}}" alt="{{image_alt_sh}}" />
{{/each}}

我的服务器将返回已调整大小的图像。我不想把它放在我的数据库中,因为它们不是固定值。

1 个答案:

答案 0 :(得分:14)

计算属性不应该依赖于参数,它会破坏缓存范例,这正是助手和方法的用途。

v3.2 https://guides.emberjs.com/release/templates/writing-helpers/

import { helper } from '@ember/component/helper';

export function formatCurrency([value, ...rest]) {
  let dollars = Math.floor(value / 100);
  let cents = value % 100;
  let sign = '$';

  if (cents.toString().length === 1) { cents = '0' + cents; }
  return `${sign}${dollars}.${cents}`;
}

export default helper(formatCurrency);

Ember的全球非导入版本

Ember.Handlebars.helper('img', function(prop, height, width, options) {
  return new Handlebars.SafeString('<div style="height:' + height +'px;width:'+ width +'px;background-color:' + prop + '">' + prop + '</div>');
});

http://emberjs.jsbin.com/IgUFaTAk/1/edit