5

以下代码不起作用。也许我做错了什么。请更正我的代码：

  1. 索引.html：
<html>
<head>
    <title>Page</title>
    <link rel="import" href="msg_box.html">
</head>
<body>
  <msg-box id="msg" caption="Caption 1"></msg-box>
  <button id="btn">click me</button>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'msg_box.dart';

void main() {
  initPolymer();

  ButtonElement btn = querySelector("#btn");

  btn.onMouseEnter.listen((e) {
    MsgBoxElement elm = querySelector("#msg");

    window.alert(elm.caption); // SHOWS 'Caption 1'

    elm.caption = "Caption 2"; // DON'T WORK!

    window.alert(elm.caption); // SHOWS 'Caption 2', BUT PAGE SHOWS 'Caption 1'!!!
  });`
}
  1. msg_box.html
<polymer-element name="msg-box" attributes="caption">
  <template>
  <h4>{{caption}}</h4> 
  </template>
  <script type="application/dart" src="msg_box.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
@CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
  // fields
  String _caption;
  String get caption => _caption;
  void set caption(String value) {
    _caption = notifyPropertyChange(#caption, _caption, value);
  }

  MsgBoxElement.created() : super.created() {
  }
}

这个问题对我来说很关键。另请参阅https://code.google.com/p/dart/issues/detail?id=14753&sort=-id&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary

4

2 回答 2

5

我认为这里的问题是由于您的代码未在脏检查区域中运行，因此未处理未处理的更改通知。你可以做两件事来解决这个问题：

  • Observable.dirtyCheck()更新后立即致电caption；或者，
  • 在脏检查区域内运行您的代码：
void main() {
  var dirtyCheckingZone = initPolymer();
  dirtyCheckingZone.run(() {
     ButtonElement btn = querySelector("#btn");
     btn.onMouseEnter.listen((e) {
       MsgBoxElement elm = querySelector("#msg");
       elm.caption = "Caption 2";
    });
  });
}

该区域确保在执行任何回调或侦听器后，我们将为您调用 Observable.dirtyCheck。这种方法比显式调用dirtyCheck 稍好一些，因为当我们为部署进行编译时，我们会从脏检查切换到显式通知。initPolymer 返回的区域已更改以反映这一点。

单独说明：如果使用@published注解，上面的 MsgBoxElement 可以简化。这是为了表达一个属性既是可观察的，又是作为元素的属性公开的。

import 'package:polymer/polymer.dart';

@CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
  @published String caption;
  MsgBoxElement.created() : super.created();
}
于 2013-11-04T17:57:11.107 回答
1

根据您的信息，模型似乎正在更新，但是 DOM 没有更新，很可能是因为未设置可观察元素。尝试将以下注释添加到您的msg_box飞镖代码：

import 'package:polymer/polymer.dart';
@CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
  // fields
  @observable String _caption;
  @reflectable String get caption => _caption;
  @reflectable void set caption(String value) {
    _caption = notifyPropertyChange(#caption, _caption, value);
  }

  MsgBoxElement.created() : super.created() {
  }
}

请参阅dart 邮件列表中有关@reflectable属性的重大更改公告。另请参阅有关设置@observable getter的讨论

于 2013-11-04T14:56:09.190 回答