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，page-2触发事件2。这是我的聚合物元素的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页元素获取标签“铁选”）但它不会持久。在执行了一堆聚合物代码之后，该值又回到了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

清除activateEvent的{{1}}属性（activate-event属性），如下所示：

iron-selector

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

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

2 个答案: