条件模板似乎不起作用

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
            }
        }
    });
})();

当我单击 'Local login' 时，第一个模板未隐藏。我希望它被隐藏，因为我将屏幕设置为一个没有定义 'initial' 属性的新对象。还有一件事我很难理解：如果我将屏幕对象设置为

{
     initial: false,
     localLogin: true
}

在 doLocalLogin() 函数中，什么也没有发生。

Answer 1

当您更改对象的子属性时，您需要使用 Polymer API - 即使您想要覆盖整个对象。您可以使用 set 或 notifyPath。为了使您的示例起作用，我必须将 initial 设置为 false。

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

条件模板似乎不起作用

Conditional template doesn't seem to work

polymer