# toggleProperty/action syntactic sugar

**URL:** <https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449>\
**Category:** Proposals\
**Created:** [November 26, 2013, 1:22am UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449 "2013-11-26T01:22:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [November 26, 2013, 1:22am UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/1 "2013-11-26T01:22:46Z")

</div>

Personally I use the following pattern quite a lot:

```nohighlight
{{action 'toggleModalVisibility'}}

```

with the following action:

```nohighlight
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:

```nohighlight
{{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?

---

<div class="post-metadata">

**Author:** ![phk](https://avatars.discourse-cdn.com/v4/letter/p/7ea924/32.png) [@phk](https://discuss.emberjs.com/u/phk)\
**Post date:** [November 26, 2013, 12:49pm UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/2 "2013-11-26T12:49:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [November 26, 2013, 12:51pm UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/3 "2013-11-26T12:51:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rlivsey](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rlivsey/32/14737_2.png) [@rlivsey](https://discuss.emberjs.com/u/rlivsey)\
**Post date:** [November 26, 2013, 8:05pm UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/4 "2013-11-26T20:05:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [December 2, 2013, 9:22pm UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/5 "2013-12-02T21:22:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marclundgren](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@marclundgren](https://discuss.emberjs.com/u/marclundgren)\
**Post date:** [December 30, 2016, 7:53pm UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/6 "2016-12-30T19:53:21Z")

</div>

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))

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [December 31, 2016, 1:51am UTC](https://discuss.emberjs.com/t/toggleproperty-action-syntactic-sugar/3449/7 "2016-12-31T01:51:07Z")

</div>

You could also use something like [GitHub - DockYard/ember-composable-helpers: Composable helpers for declarative templating in Ember](https://github.com/DockYard/ember-composable-helpers#toggle)