Running functions on an emberjs component

Question

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?

Andrey Mikhaylov - lolmaus · Accepted Answer · 2015-06-09 10:49:45Z

1

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.

answered Jun 9, 2015 at 10:49

Andrey Mikhaylov - lolmaus

24k8 gold badges91 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jax Over a year ago

OK this makes sense. So I should be binding to something like this {{stop-watch controls=stopWatchControls}}. Where would you put the 'stop-watch-controls' model? In the models folder? It sort of belongs with the component somehow.

Andrey Mikhaylov - lolmaus Over a year ago

Think of the model as of the stop-watch itself. You can toss the model around, have multiple instances of it, etc. And the component is merely its interface of a model. You can have more than one interface, e. g. full and compact.

Andrey Mikhaylov - lolmaus Over a year ago

All the logic and behavior should be in the model, the component should only have logic related to visualization (e. g. position of an analog clock hand), not the time counting stuff. And yes, you can put the model into the models folder.

Collectives™ on Stack Overflow

Running functions on an emberjs component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related