数据绑定在聚合物Dart中不起作用 [英] Databinding not working in Polymer Dart
问题描述
问题的主题行有点含糊。我有一个主要的入口文件加载（entry.html），它使用一个entry.dart脚本。在entry.html中，我使用了自定义聚合元素卡表。 cardtable.html是一个简单的列表。当我加载entry.html第一次，一切都很好..我看到多行文本打印静态数据在我的模型列表。我的entry.html有一个按钮，点击它改变数据模型（通过entry.dart，我调用cardtable.dart）。
The subject line of the question is a bit ambiguous. I have an main entry file to load (entry.html) which uses a entry.dart script. In the entry.html, I use a custom polymer element card-table. cardtable.html is a simple list. When I load the entry.html first time, everything is good.. I see multiple rows of text printed with static data in my model list. My entry.html has a button, clicking which changes the data model (through entry.dart, I invoke the cardtable.dart). I see the right methods being called and data model change is confirmed, but UI is not updated.
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();
});
}
}
card-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');
}
}
推荐答案
您使用一个变量而不是< body> 中的变量来引用新< card-table> / code>标记。
You call increment on a new <card-table> you reference using a variable, not the one inside your <body> tag.
而不是
tablec = new Element.tag('card-table');
您使用
tablec = querySelector('card-table');
这篇关于数据绑定在聚合物Dart中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
