javascript - polymer 结合 on-tap 事件 on inside-h-t-m-l

Question

如何触发 html 字符串中存在的“点击”事件，该字符串被插入到 polymer 组件中，如下所示。

<dom-module id="test-comp">

    <template>
        Please <span inner-h-t-m-l="[[htmlString]]"></span> here for an alert!
    </template>

    <script>
        Polymer({

          is: 'test-comp',

          properties: {
              htmlString: {
                  type: String,
                  value: '<a on-tap="doSomething">click</a>'
              }
          },

          doSomething: function () {
              console.log('tap event has happened!');
          }

        });
    </script>

</dom-module>

实际结果: 无法看到任何点击/点击事件发生，我猜 htmlString 中的点击事件在插入时没有编译为 polymer 事件。

预期输出: 我应该能够看到输出 'tap event has happened!'当点击 html 渲染句子中的“click” anchor 标记时

Answer 1

我不太清楚你想在这里实现什么。
但是，我不认为您所展示的方法是干净的或值得推荐的。

如果您想根据某些状态添加和删除功能，您可以 Imperatively add and remove listeners

this.listen(this.$.myButton, 'tap', 'onTap');
this.unlisten(this.$.myButton, 'tap', 'onTap');

如果您希望根据状态切换功能，我会在决策功能中执行此操作:

<dom-module id="test-comp">

  <template>
    <span on-tap="alertSwitch"></span>
  </template>

  <script>
    Polymer({

      is: 'test-comp',

      alertSwitch: function() {
         if(a){
           this.alertOne();
         } else {
           this.alertTwo();
         }
      },
      alertOne: function () {
          console.log('first tap event has happened!');
      },
      alertTwo: function () {
          console.log('second tap event has happened!');
      }

    });
  </script>

</dom-module>

目前还不清楚您的目标是什么。