聚合物有界属性未更新（有时）

Question

1.0 有这个问题

我在聚合物元素中有以下 html

  <iron-selector attr-for-selected="step-number" selected="{{stepNumber}}">
    <section step-number="1">
      <page-1 id="page1"></page-1>
    </section>
    <section step-number="2">
      <page-2 id="page2"></page-2>
    </section>
    <section step-number="3">
      <page-3 id="page3"></page-3>
    </section>`

第 1 页触发事件 - event1，第 2 页触发 event2。这是我的聚合物元素的 javascript

function () {
  Polymer({
    is: 'name',
    ready: function() {
      this.stepNumber = 1;
      var firstStep = this.$.page1;
      var secondStep = this.$.page2;
      var thirdStep = this.$.page3;
      var that = this;
      firstStep.addEventListener('event1', function(e) {
        that.stepNumber = 2;                       // WORKING
      });
      secondStep.addEventListener('event2', function(e) {
        that.stepNumber = 3;                      // NOT WORKING
      });
    }
  });

这是有趣的部分： 两个事件都被触发，stepNumber 的值在event1 处理程序内部更新，但不在event2 处理程序内部更新。我还对此进行了调试，在event2 处理程序中，stepNumber 的值确实得到了更新（第 3 页元素获得了标签“iron-selected”），但它不会持续存在。一堆聚合物代码执行后，值又回到了2。

看起来像聚合物中的错误？

来自调试器的一些信息 -

在事件方法之后执行的聚合物代码基本上是执行事件处理程序的代码，然后是“手势识别”代码（我猜是点击），其中标签铁选择器被添加到页面-2 节

var recognizers = Gestures.recognizers;

for (var i = 0, r; i < recognizers.length; i++) 
{ 
   r = recognizers[i]; 
   if (gs[r.name] && !handled[r.name]) {
     handled[r.name] = true; // in here for r.name = "tap"
   r[type](ev); // type = click. ev = MouseEvent. ev.target = iron-selector
} 
}

深入挖掘 - 这将创建一个事件处理程序

_createEventHandler: function(node, eventName, methodName) {
var host = this;
return function(e) {
if (host[methodName]) {
hostmethodName;
} else {
host._warn(host._logf("_createEventHandler", "listener method " + methodName + " not defined"));
}
};

主机是铁选择器。 methodName 是 _activateHandler，其中第 2 页的部分调用了 _itemActivate

_activateHandler: function(e) {
      // TODO: remove this when https://github.com/Polymer/polymer/issues/1639 is fixed so we
      // can just remove the old event listener.
      if (e.type !== this.activateEvent) {
        return;
      }
      var t = e.target;
      var items = this.items;
      while (t && t != this) {
        var i = items.indexOf(t);
        if (i >= 0) {
          var value = this._indexToValue(i);
          this._itemActivate(value, t);
          return;
        }
        t = t.parentNode;
      }
    },
_itemActivate: function(value, item) {
      if (!this.fire('iron-activate',
          {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
        this.select(value);
      }

_itemActivate 是 stepNumber 的值变为 2 的地方

Answer 1

清除iron-selector的activateEvent属性（activate-event属性），像这样：

<iron-selector attr-for-selected="step-number" selected="{{stepNumber}}" activate-event="">

Answer 2

试试这个：

Polymer({
  is: 'name',
  ready: function() {
    this.stepNumber = 1;
    var firstStep = this.$.page1;
    var secondStep = this.$.page2;
    var thirdStep = this.$.page3;
    var that = this;
    firstStep.addEventListener('event1', function(e) {
      that.async(function(){
        that.stepNumber = 2;
      },0);
    });
    secondStep.addEventListener('event2', function(e) {
      that.async(function(){
        that.stepNumber = 3;
      },0);
    });
  }
});