通知聚合物有关新功能的结果

Question

即使输入命令没有改变，我如何告诉 Polymer 2.0 函数结果发生了变化？考虑这个小例子，它修改了基本的 polymer-2-starter-kit 的 my-view1：

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <div>[[getText(node)]]</div>

    <paper-button on-tap="changeElements">Change elements</paper-button>
  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }

      static get properties() {
        return {
           node: {
            type: Number,
            value: 0
          },

          node2: {
            type: Number,
            value: 5
          }
        }
      }

      changeElements() {
        this.node2 += 1;
        console.log(this.getText(0));
      }

      getText(item) {
        return this.node2;
      }

    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

当我单击按钮时，node2 以及控制台中显示的 getText 结果发生变化。但是，描绘的值始终保持在初始值 5。我猜，由于节点没有改变，因此不会处理更改。是否有可能将函数结果的变化通知 Polymer？类似 notifyPath 的功能或类似的东西？或者我需要设置一些标志或类似的东西吗？

虽然我知道这个最小的例子可以通过输出 node2 而不是使用 getText(node) 来轻松解决，但在我的常规项目中它要复杂得多，其中一个函数根据不同的因素计算输出。

Answer 1

您正在对节点属性使用计算绑定，这意味着它只会在节点更新时重新计算。如果您希望在更新 node2 时触发它，则需要与 node2 绑定。（或绑定到节点和节点 2..）

有点奇怪的例子，因为您绑定到一个您没有使用的值。

Answer 2

为了...

<div>[[getText(node)]]</div>

...添加...

<div>[[getText(node, node2)]]</div>

并使用 this.set('node2', number) 将事件发送到 [[getText]] 以便它更新。使用 this.[variable] = XXX 设置变量通常不会更新任何内容。

养成使用 this.set 的习惯，否则当您开始使用 dom-repeat 和 dom-if.[=12 时，您将遇到真正的麻烦=]

通知聚合物有关新功能的结果

Notify polymer about new function result

javascript

polymer

polymer-2.x