Polymerでブール値属性をバインドする方法はありますか？

Question

すみれ！私はこの質問をしています。なぜなら、これらの質問は正しく答えることができないからです。

In Polymer 1.0 how can I databind to a boolean property of an element?

Polymer 1.x: How to data bind to a variable boolean attribute?

How to bind paper-toggle-button to a Boolean in 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> 

なしに動作しません。 Notifierは完璧に動作しています。私は何が欠けていますか？

Answer 1

my-oauthの外部に値をエクスポートするには、双方向のデータバインディングが必要なので、<my-oauth>のログインプロパティに{{}}の中カッコを使用する必要があります。

loggedInプロパティはmy-oauth〜notify: trueの範囲内にある必要があります。そのため、変更された外部の情報が通知されます。

属性に反映する必要はありません。このようなデータバインディングは属性に反映されずに動作し、明示的に値をシリアル化するオーバーヘッドが発生するため、$記号を使用する必要はありません。

Answer 2

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> 

あなたがtrueに通知していない場合は、このはを動作しません見ることができるように！