我的聚合物成分定义如下:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="add-money">
<template>
<style></style>
<paper-dialog id="add-money-dialog" modal >
<h2>Add money</h2>
<paper-dialog-scrollable>
<div>
<span>{{account.name}}</span>
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Add</paper-button>
</div>
</paper-dialog>
</template>
<script>
var AddMoney = Polymer({
is: 'add-money',
properties: {
account: {
type: Object,
notify: true,
}
},
factoryImpl: function(acc) {
this.account=acc;
},
showPopup:function(){
console.log(JSON.stringify(this.account));
var dialog = document.getElementById("add-money-dialog");
if (dialog) {
dialog.open();
}
}
});
</script>
</dom-module>
现在,我实例化它并在点击另一个组件的按钮时添加到正文中。
addMoney:function(e){
var button = e.target;
var dialog = new AddMoney(e.model.item);
document.body.appendChild(dialog);
dialog.showPopup();
}
在这样做时,我能够看到showPopup方法中的数据,但同样的情况并没有反映在DOM上。
好奇,可能是什么问题以及解决方法是什么。我是这方面的新手,并尝试编写一些基于组件的代码来理解聚合物。请就此提出建议。提前谢谢。
答案 0 :(得分:1)
这是风格的问题。因为没有显示任何内容,我认为价值不会出现。但它实际上是隐藏的,我看不到它。我添加了一些样式 - 纸张 - 对话框 - 可滚动,现在我可以看到值。