dart - 刷新聚合物元素

Question

我想检测属性更改，然后刷新元素。

我做

主镖

library main;

import "package:polymer/polymer.dart";
import "dart:html";

void main() {
  initPolymer().run(() {
     Polymer.onReady.then((e) {
       querySelector("nav-bar").setAttribute("mode", "ok");
     });
   });
}

navbar.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="nav-bar" attributes="mode">
  <template if="{{mode == null}}">
    <p>Hello</p>
  </template>
    <template if="{{mode == 'ok'}}">
    <p>Youpie</p>
  </template>
  <script type="application/dart" src="navbar.dart"></script>
</polymer-element>

导航栏

import 'package:polymer/polymer.dart';

@CustomTag('nav-bar')
class NavBar extends PolymerElement {
  @published String mode;

  NavBar.created() : super.created();
}

当我将元素放入index.html中时，无论“mode”值如何，我总是Hello。

当我使用查询更改模式时，什么也没有发生。文本应更改...

我做错事情了 ？

Answer 1

有两种方法可以解决问题

querySelector("nav-bar").mode = "ok");

要么

@PublishedProperty(reflect: true) String mode;

或两者兼有(我认为最好同时应用)