如何在Polymer中綁定布爾屬性？

Sup everyone！我在問這個問題，因爲這些問題無法正確回答。如何在Polymer中綁定布爾屬性？

我如何可以綁定在聚合物中的布爾屬性？

我有這個元素。總之，如果用戶登錄，它會反映「登錄」屬性，如果用戶未通過身份驗證，則不會對其進行設置。

<dom-module id="my-oauth"> 
    <template> 

    </template> 
    <script> 


    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'my-oauth', 
     ready : function() { 
      this.verifyLogin(); 
     }, 
     properties : { 
      loggedIn : { 
      type : Boolean, 
      reflectToAttribute: true, 
      value : false 
      } 
     }, 
     observers : ['verifyLogin()'], 
     verifyLogin: function() { 

      var val = localStorage.getItem("token") === null 
       || localStorage.getItem('token_expiration_time') == null 
       || localStorage.getItem('token_type') == null 
       || localStorage.getItem('token_expiration_created_date') == null 
       || !isTokenValid(localStorage.getItem('token_expiration_time'), 
           localStorage.getItem('token_expiration_created_date')) 
       ? false : true; 

      if (val) { 
       this.setAttribute('logged-in',true); 
      } else { 
       this.removeAttribute('logged-in'); 
      } 


     }, 
     logout : function() { 
      localStorage.removeItem("token"); 
      console.log("Logged out!"); 
      this.verifyLogin(); 

     }, 
     storeLocal(token, expiration, tokenType, issued) { 

      issued = typeof issued !== 'undefined' ? issued : Date.now(); 
      localStorage.setItem("token", token); 
      localStorage.setItem("token_expiration_time", expiration); 
      localStorage.setItem("token_type", tokenType); 
      //The Time in which was set. 
      localStorage.setItem("token_expiration_created_date", issued); 
      this.verifyLogin(); 
     } 
     }); 
    })(); 

    function receiveToken(token) { 
     console.log("Token Received."); 
     console.log(token); 
    } 


    </script> 


</dom-module>

問題是，我該如何讀取「登錄」屬性？

例如：

<my-oauth logged-in$="[[authenticated]]"></my-oauth> 

<template is="dom-if" if="[[!authenticated]]"> 
       <h1>User is not logged in</h1> 
      </template> 
      <template is="dom-if" if="[[authenticated]]"> 
       <h1>User has logged in</h1> 
      </template>

什麼我也都嘗試過的問題：

<my-oauth id="js-ouath" {{loggedIn}}></my-oauth> 
<template is="dom-if" if="{{!loggedIn}}"> 
       <h1>User is not logged in</h1> 
      </template> 
      <template is="dom-if" if="{{loggedIn}}"> 
       <h1>User has logged in</h1> 
      </template>

這一切都不工作。通知程序工作完美無瑕。我錯過了什麼？

來源

2016-10-04 Jose A

對於<my-oauth>的登錄屬性，您需要使用{{}}大括號，因爲您需要雙向數據綁定才能導出my-oauth以外的值。

此外，您需要將loggedIn屬性設置爲my-oauth至notify: true，以便外界通知其更改。

您不需要反映屬性或使用$符號，因爲這樣的數據綁定可以在不反映屬性的情況下工作，並且顯然它是序列化值的額外開銷。

來源

2016-10-04 15:59:04 akc42

謝謝。我已經嘗試將notify設置爲true，但該元素不會綁定它。事實上，如果我在控制檯中執行document.querySelector，我可以看到花括號{{}}沒有映射到任何東西。 –

等待！我知道了！你是對的。因此，無論何時將notify屬性設置爲true，Polymer將會執行的操作都是name-of-attr =「true」，因此您只需要執行name-of-attr =「{{myBind}}」。 OMG，謝謝一堆。 –

akc42是對的。因此，這裏是你怎麼做：

<dom-module id="my-oauth"> 
    <template> </template> 
    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'my-oauth', 
     ready : function() { 
      this.verifyLogin(); 
     }, 
     properties : { 
      loggedIn : { 
      type : Boolean, 
      value : false, 
      notify: true 
      } 
     }, 
    </script> 
</dom-module>

然後在你的腳本：

<my-oauth logged-in="{{mybind}}"> </my-oauth>

正如你可以看到這個將無法正常工作如果你沒有通知爲真！

來源

2016-10-04 18:18:46

如何在Polymer中綁定布爾屬性？

回答

相關問題