CODEWITHSUNDEEP
javascriptember.js
Vilhelm H.
Vilhelm H.

Reputation: 1335

May an ember component have logic / computed values

I am using latest version of ember (1.13.5), but want to be Ember 2.0 compliant.

I want to create a compnent that has one input parameter and some internal logic to calculate two more values so the component-template has 3 fields that have bindings to variables.

If this was a normal template this would work nicely with a controller. But a component does not have a controller. What is possible with the Ember.Component subclass?

Component defined in \templates\components\my-component.hbs:

<h1>{{value1}}<h1>
<h2>{{value2}}<h2>
<h3>{{value3}}<h3>

Use in a template:

{{my-component value1=34}}

And then some javascript somewhere to define value2 and value3:

value2 = value1 *3;
value3 = value2 *6;

Where to put this javascript so value2 and value3 are available in my component? (This is just a simple example. The real logic of value2 and value3 is more complicated, but based only on value1.)

Upvotes: 0

Views: 294

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Yes, of course it can, you would put it in a defined component class.

It's likely your component is really \templates\components\my-component.hbs and not \templates\components\my-component.js. What you need to do is define a class for your component \components\my-component.js

If you are using Ember-cli and you used the scaffolding, it's likely already there, and then you would place computed properties in there to accomplish value2 and value3.

If you aren't, it will look like so (unless you are using globals).

import Ember from "ember";

export default Ember.Component.extend({
  value2: Ember.computed('value1', function() {
    //....
  })
});

Upvotes: 5

Related Questions