Question

我有以下聚合物元素

import 'package:polymer/polymer.dart';
import 'dart:mirrors';
import 'dart:async';
import 'dart:math';

class Column extends Observable{
  @observable String name;
  @observable String displayName;
  Column(this.name,this.displayName);
}

class Model extends Observable{
  @observable String fname;
  @observable String lname;
  @observable int age;

  Model(this.fname,this.lname,this.age);

  operator [](String fieldName){
    var im = reflect(this);
    return im.getField(new Symbol(fieldName)).reflectee;
  }
}


@CustomTag('main-app')
class MainApp extends PolymerElement {
  @observable ObservableList<Object> data;
  @observable ObservableList<Column> columns;

  MainApp.created() : super.created(){
    columns = new ObservableList.from([new Column("fname","First Name"), new Column("lname","Last name"),new Column("age","Age")]);
    emulateDataChanging();
  }

  emulateDataChanging(){
    var r = new Random();
    var names = ["aaa","bbb","ccc","ddd","eee"];
    //add some models to data first
    data = new ObservableList();
    for(int i=0;i<5;i++){
      data.add(new Model(names[r.nextInt(4)],names[r.nextInt(4)],r.nextInt(99)));
    }

    //modify couple random props every second
    new Timer.periodic(new Duration(seconds:1),(t){

      Model m;
      m=(data[r.nextInt(data.length-1)] as Model);
      m.lname=names[r.nextInt(4)];
      m.deliverChanges();
      m=(data[r.nextInt(data.length-1)] as Model);
      m.fname=names[r.nextInt(4)];
      m.deliverChanges();
      m=(data[r.nextInt(data.length-1)] as Model);
      m.age =r.nextInt(4);
      m.deliverChanges();
      //add a random model
      //data.add(new Model(names[r.nextInt(4)],names[r.nextInt(4)],r.nextInt(99)));
    });
  }
}

和元素的html

<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="main-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>


    <!--A table -->
    <table id="table" class="table table-hover table-mc-light-blue">
      <thead>
      <tr>
        <th template repeat='{{column in columns}}'>
          {{column.displayName}}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr template repeat='{{row in data}}'>
        <td template repeat='{{ column in columns}}' data-title="{{column.displayName}}">
          {{row[column.name]}}
        </td>
      </tr>
      </tbody>
    </table>

    <!--A repeat by binding to the Model properties directly -->
      <template repeat="{{row in data}}">
        <p>{{row.fname}} {{row.lname}} {{row.age}}</p>
      </template>

  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

我添加了整个代码，因此可以复制并过去并在几秒钟内运行，正如您在模板中看到的，我有一个表，并使用嵌套重复添加行，并且模型的属性可以通过名称访问列，以及直接访问属性的单个重复。

然而，在更改模型属性时出现问题，更改没有反映到表中但反映在另一个重复中，我认为如果你运行它，你会更好地理解。

Answer 1

我认为你可以尝试两件事：

使用Observable.dirtyCheck()
在聚合物元素上调用deliverChanges()，而不在模型

//编辑

我认为你的问题是你每次都创建一个新的ObservableList（）。尝试仅创建一次ObservableList，例如在您的created（）contstructor中，然后更改列表的元素而不是对象。

//编辑2 - 可能的解决方案

你好。既然我正确地理解了你的问题，我就有了解决方案。我也有同样的问题。我通过在模型周围写一个包装器来解决它：

<强> HTML

<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="model-wrapper" attributes="model property">
  <template>
    {{value}}
  </template>
  <script type="application/dart" src="model_wrapper.dart"></script>
</polymer-element>

<强> DART

import 'package:polymer/polymer.dart';
import 'dart:mirrors';

@CustomTag('model-wrapper')
class ModelWrapper extends PolymerElement {
  @published var model;

  @published String property;

  @ComputedProperty('model[property]')
  get value => model[property] == null ? "" : model[property].toString();

  @observable
  set value(v) => model[property] = v; 

  ModelWrapper.created() : super.created(){

  }

  void ready() {
    model.changes.listen((List<ChangeRecord> changes) {
      changes.forEach((record) {
        if(record is PropertyChangeRecord) {
          if(MirrorSystem.getName(record.name) == property) {
            notifyPropertyChange(#value, record.oldValue, record.newValue);
          }
        }
      });
    });
  }
}

我的原始包装可以在这里找到：

https://github.com/roberthartung/webui/blob/master/lib/util/webui-property-wrapper.dart https://github.com/roberthartung/webui/blob/master/lib/util/webui-property-wrapper.html

Answer 2

问题是您如何访问模型中的数据

{{row[column.name]}}

[]运算符访问权限不可观察且column.name不会更改，因此永远不会重新评估表达式。仅因为字段为@observable而无法使用[]运算符访问@observable进行引用。

我的尝试 - 介绍dummy字段：

class Model extends Observable {
  @observable String fname;
  @observable String lname;
  @observable int age;

  @observable String get dummy => '$fname$lname$age';

  getValue(String colName, String dummy) {
    return this[colName];
  }

  Model(this.fname, this.lname, this.age) {
    changes.listen((List<ChangeRecord> c) {
      c.forEach((PropertyChangeRecord r) {
        if(r.name != #dummy) {
          notifyPropertyChange(#dummy, null, dummy);
        }
      });
    });
  }

  operator [](String fieldName){
    var im = reflect(this);
    return im.getField(new Symbol(fieldName)).reflectee;
  }
}

并绑定字段值，如

{{row.getValue(column.name, row.dummy)}}

这样，Polymer绑定表达式包含一个更改row.dummy的字段，这使Polymer重新计算表达式。

按名称获取财产时，不会反映变更

2 个答案: