javascript - Ampersand JS 中的多个数据绑定(bind)

Question

我有一个模型:

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

View :

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跨度已隐藏，standing应显示跨度。无论如何，是否可以使用多个数据绑定(bind)来做到这一点？或者我是否必须显式定义另一个属性，例如 isStanding在模型和我的 toggleState 中方法，也切换该属性吗？

Answer 1

尝试使用切换绑定(bind)上的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 上所示