要切换的 Ampersand 的 booleanClass，add/remove a 属性

Question

我找到了这个文档，但我仍然无法弄清楚如何在代码中使用它。 https://ampersandjs.com/docs/#ampersand-dom-bindings-booleanclass

我想要做的是使用 Ampersand 的绑定，而不是使用 Jquery $() 在我单击元素时捕获或触发事件。有人可以展示一个将切换 add/remove class 的符号代码示例，我可以将其与 css 一起使用。这将有助于展开或折叠 html 元素。

Answer 1

您似乎混淆了这里的两件事：events 和 bindings。 Bindings 是绑定特定变量（在 props 或 session 中定义），而 events 是触发事件，就像 jquery 一样。这是一起使用这两者的示例：

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

这里我定义了变量switchedOn，#your-selector的classactive的状态绑定。

就我个人而言，如果您只需要切换一个元素，我认为这有点过分了。在许多情况下 jquery 需要的代码更少。

要切换的 Ampersand 的 booleanClass，add/remove a 属性

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

css

ampersand

ampersand.js