Question

问题的主题有点含糊不清。我有一个要加载的主条目文件（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');
  }

}

Answer 1

您使用变量（而非<card-table>标记内的变量）调用您引用的新<body>上的增量。

而不是

tablec = new Element.tag('card-table');

你使用

tablec = querySelector('card-table');

数据绑定在Polymer Dart中不起作用

1 个答案: