dart-polymer：不能从事件处理程序中设置属性 [英] dart-polymer: cannot set an attribute from an event handler
问题描述
以下代码不起作用。可能我做错了。请更正我的代码：
The following code doesn't work. Maybe I do something wrong.. Please correct my code:
- index.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'!!!
});`
}
- msg_box.html
$ b b
<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
This issue is critical for me. See also https://code.google.com/p/dart/issues/detail?id=14753&sort=-id&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary
推荐答案
我认为这里的问题是有待处理的更改通知未处理，因为您的代码不在脏检查区域中运行。您可以用两种方法解决此问题：
I believe the problem here is that there are pending change notifications not being processed because your code is not running in the dirty-checking zone. There are two things you can do to fix this:
- 调用
Observable.dirtyCheck（）正在您更新到caption之后;或
- call
Observable.dirtyCheck()right after your update tocaption; or, - run your code within the dirty-checking zone:
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明显好一点，因为当我们编译部署时，我们从脏检查切换到显式通知。
This zone makes sure that after any callback or listener is executed, we'll call Observable.dirtyCheck for you. This approach is slightly better than calling dirtyCheck explicitly because, when we compile for deployment, we switch from dirty-checking to explicit notifications. The zone returned by initPolymer is changed to reflect this.
另一个注意事项：如果使用 @published ，MsgBoxElement可以被简化。 code>注释。这意味着一个属性是可观察的，并且作为您的元素的属性公开。
A separate note: the MsgBoxElement above can be simplified if you use the @published annotation. This is meant to express that a property is both observable and exposed as an attribute of your element.
import 'package:polymer/polymer.dart';
@CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
@published String caption;
MsgBoxElement.created() : super.created();
}
这篇关于dart-polymer：不能从事件处理程序中设置属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
