Question

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

我想要做的是使用Ampersand的绑定，而不是在单击元素时使用Jquery $（）来捕获或触发事件。有人可以展示一个＆符号的示例，它将切换，添加/删除我可以用于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的类active的状态绑定到的变量#your-selector。

就我个人而言，如果你只需要切换一个元素，我觉得它有点太多了。在许多情况下，jquery将需要更少的代码。

Ampersand的booleanClass来切换，添加/删除属性

1 个答案: