条件模板似乎并没有工作

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: false, 
    localLogin: true 
} 

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

Answer 1

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

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