toggleProperty/action syntactic sugar


#1

Personally I use the following pattern quite a lot:

{{action 'toggleModalVisibility'}}

with the following action:

toggleModalVisibility: function () {
  this.toggleProperty('isModalVisible');
}

And I can see this being something that is just built into a handlebars helper, where you don’t have to create the action. For example:

{{toggle isModalVisible}}

Would toggle that property on the controller, and the ‘action’ would be built into the toggle helper. It could also have the target attribute that action has. I probably have at least 20 of these types of actions in my current application. Seems like a pattern to me.

Has anyone else had this experience?


#2

Why can’t you use {{action toggleProperty ‘isModalVisible’}} in the hbs? It does work.


#3

Really? I didn’t know it was an action. I’ll have to try this. Thanks phk.


#4

That may work right now, but you’ll get a deprecation warning as it’s calling a method on the controller and not setup as an action.

Since 1.0.0-rc.8 actions need to be in the actions object.


#5

Yes, @rlivsey has a good point, that would be poor practice to use deprecated functionality.


#6

I’m a few years late to the party, but here’s the pattern I used that avoids me creating new methods on controllers/components:

action=(action (mut myProp) (not myProp))


#7

You could also use something like https://github.com/DockYard/ember-composable-helpers#toggle