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

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。

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

来自调试器的一些信息 -

在事件方法之后执行的聚合物代码基本上是执行事件处理程序的代码，然后是 "gesture recognition" 代码（我猜是点击），其中标签 iron-selector 是添加到第 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，其中 _itemActivate 被调用用于第 2 页的部分

_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

试试这个：

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);
    });
  }
});

Answer 2

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

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

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

Polymer bounded property not updating (sometimes)

javascript

binding

polymer

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

Polymer bounded property not updating (sometimes)

javascript

binding

polymer

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