0
該問題的主題是有點模棱兩可。我有一個主要的入口文件加載（entry.html），它使用了entry.dart腳本。在entry.html中，我使用了自定義聚合物元素卡表。 cardtable.html是一個簡單的列表。當我第一次加載entry.html時，一切都很好..我在模型列表中看到用靜態數據打印的多行文本。我的entry.html有一個按鈕，點擊它可以改變數據模型（通過entry.dart，我調用cardtable.dart）。我看到正確的方法被調用並且數據模型更改已被確認，但UI未更新。數據綁定不起作用聚合物飛鏢
entry.html
<link rel="import" href="cardtable.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="entry.dart"></script>
<link rel="stylesheet" href="entry.css">
</head>
<body>
<paper-button id="inc_btn" label="+" raisedButton></paper-button>
<paper-button id="dec_btn" label="-" raisedButton></paper-button>
<card-table></card-table>
</body>
entry.dart
var tablec;
void main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
tablec = new Element.tag('card-table');
var incBtn = querySelector('#inc_btn');
incBtn.onClick.listen(increment);
});
}
void increment(Event e) {
new Future(() {
tablec.increment();
});
}
}
卡table.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="card-table">
<template>
<style>
:host {
display: block;
color: green;
}
</style>
<content>
<div id="dynamic_area">
<template repeat="{{item in list}}">
<span>ABCD : {{item}}</span>
</template>
</div>
</content>
</template>
<script type="application/dart" src="cardtable.dart"></script>
</polymer-element>
cardtable.dart
@CustomTag('card-table')
class CardTable extends PolymerElement {
@observable List list = toObservable(['a', 'b', 'c']);
CardTable.created() : super.created() {
polymerCreated();
}
void increment() {
print('INCREMENT'); //is called on clicking + button on entry.html
list.add('d');
}
}