Полимер в node-webkit: как отображать/обновлять изменения данных? Platform.flush() не работает

Я реализую приложение Polymer в окне node-webkit (v0.11.2, на основе node v0.11.13 и chromium 38.0.2125.104).

Приложение должно загружать файлы (на сервер node.js) и отображать ход загрузки в компоненте «paper-progress». Я поместил значение прогресса в свойство, чтобы обновить компонент бумажного прогресса.

Процесс загрузки выполняется классом nodejs (в приведенном ниже примере: «uploader» var), который вызывает событие «обновить» для каждого загружаемого фрагмента данных.

Проблема в том, что браузер (хром в node-webkit) очень медленно отображает значения прогресса бумаги (на моем компьютере менее 1 раза в секунду). Если я выполняю какое-либо действие в браузере, он быстрее обновляет компонент. Например: очень быстро обновить значение компонента, если я перемещаю мышь внутри окна, и менее быстро, если я добавляю console.log.

Platform.flush() не работает для отображения/обновления нового значения в компоненте. Похоже, что браузер обновляется, когда ему доступны какие-то свободные ресурсы (на моем компьютере он обновляется каждую секунду). Мне нужно плавное движение, поэтому я должен сказать компоненту, чтобы он как-то освежился.

Код ниже представляет собой упрощенную версию моего кода:

<polymer-element name="my-element" attributes="uploader">
<template>
  ...
  <paper-progress value="{{progress}}"></paper-progress>
  ...
<template>
<script>
Polymer('my-element', {
  progress: 0,
  uploaderChanged: function(oldValue, newValue) {
    if (typeof newValue !== 'undefined' && newValue) {
      var me = this;
      me.uploader.eventEmitter.on('refresh', function(e) {
        me.progress = calculateFrom(me.uploader.progressFrom);
        // paper-progress doesn't update his value faster enough
        // and Platform.flush() doesn't works to refresh the component:
        Platform.flush();
        // but it will update if I add for instance:
        console.log('progress='+me.progress);
        // or, if I move the mouse inside the node-webkit window,
        // it will update more faster
      });
    }
  },
  calculateProgressFrom: function(...) {...}
});
</script>
</polymer-element>

Ты хоть представляешь?

Спасибо


node.js javascript chromium polymer node-webkit
person Rancid    schedule 03.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение: в API полимерной документации ( https://www.polymer-project.org/docs/polymer/polymer.html#asyncmethod ) есть:

Чтобы выполнить работу после обработки изменений, Polymer предоставляет async(). Он похож на window.setTimeout(), но автоматически привязывает его к правильному значению и синхронизируется с requestAnimationFrame.

Я переместил обновление значения прогресса в асинхронную функцию, и она работает:

<polymer-element name="my-element" attributes="uploader">
<template>
  ...
  <paper-progress value="{{progress}}"></paper-progress>
  ...
<template>
<script>
Polymer('my-element', {
  progress: 0,
  uploaderChanged: function(oldValue, newValue) {
    if (typeof newValue !== 'undefined' && newValue) {
      var me = this;
      me.uploader.eventEmitter.on('refresh', function(e) {
        me.async(me.updateProgress);
      });
    }
  },
  updateProgress: function() {
    this.progress = calculateFrom(this.uploader.progressFrom);
  },
  calculateProgressFrom: function(...) {...}
});
</script>
</polymer-element>

Вероятно, это работает, потому что async использует requestAnimationFrame.

person Rancid    schedule 04.12.2014