Question

108

Ember computed properties with arguments

rated 0 times [ 115] [ 7] / answers: 1 / hits: 5108 / 11 Years ago, tue, december 10, 2013, 12:00:00

I was wondering if it was possible to add arguments to a computed properties. So far, everything I tried resulted in errors and found nothing on the subject. I want to build a URL using a value that is not included in my model.

I'm looking for something that would look like this :

// 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}}

My server will return an image that is resized. I don't want to put that in my database because these are not fixed value.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xavier

Add To Favorites

Follow

Total Points: 711

Total Questions: 91

Total Answers: 121

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

answered 11 Years ago kristinsonjab · Accepted Answer

A computed property shouldn't rely on parameters, it breaks the caching paradigm, that's precisely what helpers and methods are for.

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);

Global non-import versions of 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