Question

使用聚合物1。*

我有两个实例的元素foo-bar。

<foo>
  <apple-pie>
    <foo-bar></foo-bar>
  </apple-pie>
</foo>

<bar>
  <cherry-pie>
    <foo-bar></foo-bar>
  </cherry-pie>
</bar>

元素foo-bar具有观察路线变化的观察者：

  <app-location route="{{route}}"></app-location>

   observers: ['_routeChanged(route.path)'],

    _routeChanged: function(newValue) {
      if (this.route.path.indexOf('main') > 0 &&
        this.firstLoadComplete &&
        this.oldRoutePath !== this.route.path) {
        this.cancel();
      }
      this.oldRoutePath = this.route.path;
    },

我遇到的问题是，_routeChanged对每个实例的每次路由更改都会触发两次。这意味着this.cancel()会触发两次。...每个元素一个触发，这对我来说是个问题。

更改路线时，如何使this.cancel仅针对实际处于活动状态的元素触发？

Answer 1

当路线改变时，我该怎么做。真正活跃的元素？

您究竟如何检查实际上是“活动”的元素？

您可以让主机元素控制boolean标志来指定哪个处于活动状态，或将其双向绑定到父元素，并在那里逻辑说明其是否处于活动状态：

<foo active={{fooActive}}>
  <apple-pie>
    <foo-bar active={{fooActive}}></foo-bar>
  </apple-pie>
</foo>

<bar active={{barActive}}>
  <cherry-pie>
    <foo-bar active={{barActive}}></foo-bar>
  </cherry-pie>
</bar>

然后，将其添加到foo-bar元素中：

  <app-location route="{{route}}"></app-location>

   observers: ['_routeChanged(route.path)'],

    _routeChanged: function(newValue) {
      if (this.route.path.indexOf('main') > 0 &&
        this.firstLoadComplete &&
        this.oldRoutePath !== this.route.path &&
        this.active) {
        this.cancel();
      }
      this.oldRoutePath = this.route.path;
    },

聚合物路线观察器-多个实例导致逻辑问题

1 个答案: