dart - 每个属性更改一次渲染 Polymer 元素

Question

我有一个具有多个属性的 Polymer.dart 元素，例如

<code-mirror lines="{{lines}}" widgets="{{widgets}}">
</code-mirror>

在某些情况下 lines和 widgets有时仅同时更改 widgets变化。

我想在同一轮事件循环中独立地重新渲染组件一次。

有没有一种好的内置方法来实现这一目标？

这里的另一个麻烦是对 widgets 的解释。取决于 lines 的内容和订购 linesChanged和 widgetsChanged回调到达取决于浏览器，例如在火狐上 widgetsChanged在 linesChanged 之前先到达如果我在 linesChanged 中进行任何状态管理，组件将进入不一致状态打回来。

现在我使用这样的辅助类:

class Task {
  final _callback;
  var _task;

  Task(this._callback);

  schedule() {
    if (_task == null) {
      _task = new async.Timer(const Duration(milliseconds: 50), () {
        _task = null;
        _callback();
      });
    }
  }
}

final renderTask = new Task(this._render);

linesChanged() => renderTask.schedule();
widgetsChanged() => renderTask.schedule();

但这看起来很糟糕。也许我的 Polymer 元素的架构不正确(即我有两个属性与 widgets 取决于 lines )？

Answer 1

*Changed方法绝对是解决问题的正确方法。但是，您正试图在异步交付系统中强制同步。通常，我们鼓励人们观察属性变化并对它们使用react，而不是依赖于按特定顺序调用的方法。

您可以使用的一件事是 observe堵塞。这样，您可以为这两个属性定义一个回调并做出相应的 react :

http://www.polymer-project.org/docs/polymer/polymer.html#observeblock

Polymer 的数据绑定(bind)系统在重新渲染 DOM 时所做的工作量最少。加上 Object.observe() ，它甚至更快。我必须更多地了解您的元素以了解需要渲染的内容，但您可能会创建过早的优化。