dart-polymer：無法從事件處理程序設置屬性

Question

以下代碼不起作用。 也許我做錯了什么..請更正我的代碼：

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

<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

Answer 1

我認為這里的問題是有未處理的待處理更改通知，因為您的代碼未在臟檢查區域中運行。 你可以做兩件事來解決這個問題：

在更新caption后立即調用Observable.dirtyCheck() ; 要么，
在臟檢查區域中運行您的代碼：

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

Answer 2

根據您的信息，似乎正在更新模型，但DOM未更新，很可能是因為未設置可觀察元素。 嘗試將以下注釋添加到msg_box dart代碼中：

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

請參閱有關@reflectable屬性的dart郵件列表中的此更改公告。 另請參閱有關設置@observable getters的討論

dart-polymer：無法從事件處理程序設置屬性

問題描述

2 個解決方案

解決方案1
5 已采納 2013-11-04 17:57:11

解決方案2
1 2013-11-04 14:56:09

dart-polymer：無法從事件處理程序設置屬性

問題描述

2 個解決方案

解決方案1 5 已采納 2013-11-04 17:57:11

解決方案2 1 2013-11-04 14:56:09

解決方案1
5 已采納 2013-11-04 17:57:11

解決方案2
1 2013-11-04 14:56:09