我正在尝试使用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>
<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组件也没有显示任何内容 .
1 回答
添加通知到您的属性
}，