條件模板似乎並沒有工作

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