Ampersand JS 中的多个数据绑定

Question

我有一个模型：

var Person = AmpersandState.extend({
    props: {
        name: {
            type: 'string',
            default: ''
        }
    },
    session: {
        isSitting: {
            type: 'boolean',
            default: false
        }
    },
    toggleState: function () {
        this.toggle('isSitting');
    }
});

一个视图：

var PersonView = AmpersandView.extend({
    template: Templates.person,
    events: {
        'change [type=checkbox]': 'handleCheckbox'
    },
    bindings: {
        'model.name': {
            type: 'text',
            hook: 'name'
        },
        'model.isSitting': [
            {
                type: 'toggle',
                hook: 'sitting'
            },
            {
                type: 'toggle',
                hook: 'standing'
            }
        ]
    },
    handleCheckbox: function () {
        this.model.toggleState();
    }
});

和模板：

<li>
    <div data-hook="name"></div>
    <span data-hook="sitting">is sitting</span>
    <span data-hook="standing">is standing</span>
    <input type="checkbox">
</li>

因此，当更改复选框时，它会在模型上切换 isSitting 属性，因此 span 和 data-hook="sitting" 的可见性会相应切换。但我想做的是也切换 data-hook="standing" span，但切换它以使其相反。

所以当 sitting span 被隐藏时， standing span 应该被显示。无论如何都可以使用多个数据绑定来做到这一点吗？或者我是否必须在模型上明确定义另一个属性，例如 isStanding，并在我的 toggleState 方法中也切换属性？

Answer 1

尝试在切换绑定上使用 yes 和 no 键：

// show/hide where true/false show different things

'model.isSitting': {
    type: 'toggle',
    yes: '[data-hook=sitting]',
    no: '[data-hook=standing]'
}

见于 https://github.com/AmpersandJS/ampersand-dom-bindings#toggle

Ampersand JS 中的多个数据绑定

Multiple data bindings in Ampersand JS

javascript

ampersand.js