Ampersand's booleanClass to toggle, add/remove a property

Question

I found this documentation but I still couldn't figure out how I will use it in a code. https://ampersandjs.com/docs/#ampersand-dom-bindings-booleanclass

What I want to do is use Ampersand's binding rather than using Jquery $() to capture or fire an event when I click an element. Can someone please show an example of an ampersand code that will toggle, add/remove class that I can use with css. This will be helpful in for example expanding or collapsing an html element.

Answer 1

It seems like you are confusing two things here: events and bindings. Bindings are binding specific variables (defined in props or session), while events are triggering events, like jquery does. Here is an example of using these two together:

module.exports = AmpersandView.extend({
    template: yourTemplate,
    props: {
        switchedOn: ['boolean', true, false]
    },

    bindings: {
        'switchedOn': {
            type: 'booleanClass',
            name: 'active',
            selector: '#your-selector'
        }
    },
    events: {
        'click #your-selector': function(e){
            this.switchedOn = !this.switchedOn;
            var el = e.target;//this is the element which triggered the event. In jquery it would be 'this' inside of the handler
        }
    }
})

Here I define the variable switchedOn to which the state of class active of #your-selector is bound.

Personally, I think it's a bit too much if you need just to toggle an element. In many cases jquery will require less code.