Question

我在聚合物组件中有以下内容：

<dom-module id="ws-auth">
<template>
    <template is="dom-if" if="{{screen.initial}}">
        <a on-click="doLocalLogin">Local Login</a>
    </template>
    <template is="dom-if" if="{{screen.localLogin}}">
        login screen
    </template>
</template>
</dom-module>
<script>
(function() {
    Polymer({
        is: 'ws-auth',
        properties: {
            screen: {
                type: Object,
                notify: true
            }
        },
        attached: function() {
            if (!this.screen) {
                this.screen = {
                    initial: true
                }
            };
        },
        doLogin: function() {
            this.screen = {
                login: true
            }
        },
        doLocalLogin: function() {
            this.screen = {
                localLogin: true
            }
        }
    });
})();

单击“本地登录”时，不会隐藏第一个模板。我希望它被隐藏，因为我将屏幕设置为一个新对象，它没有定义'initial'属性。我还很难理解另一件事：如果我将屏幕对象设置为

{
     initial: false,
     localLogin: true
}

在doLocalLogin（）函数中，什么都没发生。

Answer 1

When you change the a sub property of an object, you need to use the Polymer API - even when you would like to overwrite the whole object. You can either use set or notifyPath. To get your example to work I had to set initial to false.

doLocalLogin: function() {
    this.set("screen.localLogin", true);
    this.set("screen.initial", false);
}

条件模板似乎不起作用

1 个答案: