dart-polymer:无法从事件处理程序设置属性

Question

dart-polymer:无法从事件处理程序设置属性

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

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>

Run Code Online (Sandbox Code Playgroud)

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'!!!
  });`
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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() {
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

小智 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";
    });
  });
}

Run Code Online (Sandbox Code Playgroud)

此区域确保在执行任何回调或侦听器之后,我们将为您调用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();
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	989 次
最近记录：	12 年，10 月前