Polymer Dart绑定到大型模型

debugcn 发表于 Dev

timecc

我需要显示来自相当大的Dart模型的数据。我像这样模拟我的模型层次结构：

// Tx contains a Ty
class Tx { Ty y = new Ty(); }

// Ty contains a Tz
class Ty { Tz z = new Tz(); }

// and Tz contains the field we want to display
class Tz extends Object with Observable {
  @observable String ws = 'foo';
  }

在自定义组件中，我实例化了仿真模型，并在调整浏览器窗口大小时对其进行了更新：

@CustomTag('x-a')
class Xa extends PolymerElement {

  Tx x = new Tx();    // instantiate my 'model'

  @observable String  w  = '-';
  @observable String  w2 = '-';

  //-----------------------------------
  Xa.created() : super.created();

  //-----------------------------------
  @override void attached() {
    super.attached();

    w = x.y.z.ws;    // attach the local variable to a variable in my model?

    window.onResize.listen((e) {              // browser window resize event
      x.y.z.ws = e.currentTarget.innerWidth.toString();  // works OK
      w2       = e.currentTarget.innerWidth.toString();  // works OK
      print('w=${w}  x.y.z.ws=${x.y.z.ws}  w2=${w2}');   // w never changes
      });
    }
  }

为了完整起见，以下是组件实例化：

<polymer-element name="x-a">
  <template>
    <div>w={{w}}. w2={{w2}}.</div>
  </template>
  <script type='application/dart' src='xa.dart'></script>
</polymer-element>

该w2字符串被正确地更新，因为是ws字符串的类层次深跌。但@observable String w永远不会改变。我已经试过的数不胜数的组合@observable，@published，@reflectable，@PublishedProperty，和他们的朋友。有人知道要在class变量上使用的咒语使其可观察吗？

若奥·比里巴（JoaoBiriba）

我用以下方法解决了您的问题：

@CustomTag('x-a')
class Xa extends PolymerElement {

  Tx x = new Tx();    // instantiate my 'model'

  @observable String  w  = '-';
  @observable String  w2 = '-';

  //-----------------------------------
  Xa.created() : super.created();

  //-----------------------------------
  @override void attached() {
    super.attached();

    w = x.y.z.ws;    // attach the local variable to a variable in my model?

  void convert(List<ChangeRecord>changes) {
    w = changes.first.newValue;
  }

  x.y.z.changes.listen(convert);


    window.onResize.listen((e) {              // browser window resize event
      x.y.z.ws = e.currentTarget.innerWidth.toString();  // works OK
      w2       = e.currentTarget.innerWidth.toString();  // works OK
      print('w=${w}  x.y.z.ws=${x.y.z.ws}  w2=${w2}');   // w never changes
      });
    }
  }