mardi 9 juin 2015

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?

Aucun commentaire:

Enregistrer un commentaire