CODEWITHSUNDEEP
ember.js
jax
jax

Reputation: 38583

Running functions on an emberjs component

I am wondering what is the best way to control behaviour on a component.

In my case I have a {{stop-watch}} component.

I want to start, stop and reset the component via the routes using the {{stop-watch}} in their template. The start and reset function should allow me to somehow pass the number of seconds to run for.

How can this be done when a component only really supports bindings and not the ability to execute behaviour?

This is the only way I can think of doing it. In this case; isStarted,isStopped and isReset would be boolean variables and I would toggle them to control the component.

{{stop-watch start=isStarted stop=isStopped reset=isReset timeout=timoutSeconds}}

Toggle like this for each property binding in the controller

    this.set('isStarted', !this.get('isStarted'));

Observe like this for each property in the component

startUpdated : function() {
    //start the timer
}.property('start')

In my opinion the above solution is very inelegant and verbose and there must be a better way to achieve this.

Are the any best practices for this scenario?

Upvotes: 1

Views: 41

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

You should have a model that possesses a state and methods to control the state.

You set up an instance of the model in the route, then you'll be able to control it both in the controller and the stop-watch component.

The component will automatically update its looks based on the properties of the model, and will be able to call methods on the model via actions on the component.

Upvotes: 1

Related Questions