2016-08-22 14 views
0

ポリマーのデータバインディングで試してみようとしています。ポリマーのデータ結合が期待通りに機能しない

メインaoo.html:私は次のようにwrittencodeいる

<link rel='import' href='../bower_components/polymer/polymer.html'> 
<link rel='import' href='./layouts/login-form.html'> 


<dom-module id='main-app'> 
    <template> 
    <template is='dom-if' if='[[localDomoInstance]]'> 
     <div> 
     Go to Firebase 
     </div> 
    </template> 

    <template is='dom-if' if='[[!localDomoInstance]]'> 
     <login-form spinnerInfo="{{loadingFormInfo}}"></login-form> 
    </template> 
    </template> 
</dom-module> 

<script> 
Polymer({ 
    is: 'main-app', 

    properties: { 
    localDomoInstance: { 
     type: Boolean, 
     value: false, 
    }, 

    loadingFormInfo: { 
     type: String, 
     value: "Loading App...", 
    }, 
    }, 

あなたは、私が子コンポーネントにここloadingFormInfoを送っています見ることができるように。 ログイン:

<dom-module id="login-form"> 
    <template> 
    <div class="layout vertical center center-center fit"> 
     <img src='../../img/Domo.png' class='logo'></img> 
     <a href="#" id="hideKeyboardOnFocus"></a> 
     <div class='interact'> 
     <div id="validatebox"> 
      <paper-spinner active="true"></paper-spinner><br /> 
      <div id="logomessage" class="validatemessage">[[spinnerInfo]]</div> 
     </div> 
     </div> 
    </div> 
    </template> 
    <script> 
    Polymer({ 
     is: 'login-form', 

     properties: { 
     spinnerInfo: { 
      type: String, 
     }, 
     }, 

     ready: function(){ 
     console.log("Login form ready"); 
     console.log(this.spinnerInfo); 
     } 
    }); 
    </script> 
</dom-module> 

何が起こっているが、ログイン・フォームで後に準備ができて関数が呼び出されるということである - spinnerInfoは未定義として印刷されます。 divコンポーネントに何も表示されません。

答えて

0

は、それは助けにはならなかった

+0

、あなたの特性

properties: { localDomoInstance: { type: Boolean, value: false, notify: true }, loadingFormInfo: { type: String, value: "Loading App...", notify: true }, 

}に通知します。それでも私は同じ結果を見る... –

関連する問題