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

尝试使用切换绑定上的case class Person(name: String)和yes键：

no

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

Ampersand JS中的多个数据绑定

1 个答案: