Question

我正在尝试使用Polymer中的数据绑定。我写的代码如下：

主aoo.html：

<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>

发生的事情是，在调用login-form中的ready函数后，spinnerInfo将打印为undefined。 div组件也没有显示任何内容。

Answer 1

向您的媒体资源添加通知

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

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

}，

聚合物数据绑定不按预期工作

1 个答案: