Polymer Dart 1.0 - 观察者不工作答案

【问题标题】：Polymer Dart 1.0 - Observer not workingPolymer Dart 1.0 - 观察者不工作
【发布时间】：2016-06-10 22:40:06
【问题描述】：

我有一个自定义元素 <test-object>，如下所示：

@PolymerRegister('test-object')
class TestObject extends PolymerElement with TestBehavior {

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

}

TestBehavior:

@reflectable
class TestModel extends JsProxy {

  @Property(notify: true)
  num value = 0;
  PolymerElement _target;

  TestModel(PolymerElement target) {
    _target = target;
  }

  changeBy(num by) {
    value += by;
    _target.set('testModel.value', value);
  }

}

@behavior
abstract class TestBehavior implements PolymerBase {

  @Property(notify: true)
  TestModel testModel;
  PolymerElement _instance;

  static ready(instance) {
    instance._init(instance);
  }

  static created(instance) {
    instance._instance = instance;
  }

  _init(PolymerElement instance) {
    set('testModel', new TestModel(instance));
  }

}

我的主应用如下所示：

<dom-module id="main-app">
  <style>
    :host {
        display: block;
        @apply(--layout-center-center);
    }
  </style>

  <template>
    <div>{{testObject.testModel.value}}</div>
    <test-object id="obj"></test-object>
    </div>
  </template>
</dom-module>

@PolymerRegister('main-app')
class MainApp extends PolymerElement {

  @Property(notify: true)
  TestObject testObject = null;

  MainApp.created() : super.created();

  ready() {
    set('testObject', testObject = $$('#obj') as TestObject);
  }

  @Listen('click')
  clicked([_]) {
    testObject.testModel.changeBy(1);
  }

  @Observe('testObject.testModel.*')
  valueChanged([_]) {
    window.console.log('Value was changed');
  }

}

这是一个非常简单的玩具示例。我单击 <main-app> 导致 testModel 中的值增加（这有效）。但是，<main-app> 不会更新应该显示该值的 div。此外，永远不会调用 valueChanged。我想在testModel 中通知testObject 关于valueupdate 并将此通知传播到main-app，而main-app 应该通过数据绑定更新其UI。

为什么这不起作用？

【问题讨论】：

标签： dart polymer dart-polymer

【解决方案1】：

模型类中不能有属性，只能在组件中

@Property(notify: true)
num value = 0;

应该是

@reflectable
num value = 0;

【讨论】：

【解决方案2】：

set 和 notifyPath 方法确实应该从您的元素类而不是模型中调用。这实际上大大简化了您的代码，并使一切都按预期工作。下面我粘贴了新的MainApp、TestModel 和TestBehavior 类（我还做了一些其他的小修改）。

@PolymerRegister('main-app')
class MainApp extends PolymerElement {

  // Defines a read-only property (implicit because of the getter).
  @property
  TestObject get testObject => $['obj'];

  MainApp.created() : super.created();

  // I added the 2nd optional argument here, to fix a reflectable error
  @Listen('click')
  clicked([_, __]) {
    // Notify directly here, this is the primary change.
    notifyPath('testObject.testModel.value', testObject.testModel.changeBy(1));
  }

  @Observe('testObject.testModel.*')
  valueChanged([_]) {
    window.console.log('Value was changed');
  }

}

// Removed the `_instance` field.
class TestModel extends JsProxy {

  // use @reflectable instead of @Property(notify: true)
  @reflectable
  num value = 0;

  TestModel();

  num changeBy(num by) {
    value += by;
    // Added a return value for convenience
    return value;
  }

}

@behavior
abstract class TestBehavior implements PolymerBase {
  @Property(notify: true)
  TestModel testModel = new TestModel();
}

【讨论】：