内部-h-t-m-1上的聚合物结合敲击事件

时间:2017-12-01 00:25:30

标签: javascript event-handling polymer polymer-1.0

如何触发' on-tap'事件存在于html字符串中,该字符串被插入到聚合物组件中。

<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中的on-tap事件在插入时不会编译为聚合物事件。

预期输出 点击“点击”后,我应该可以看到输出'tap event has happened!'。 html呈现句子中的锚标记

1 个答案:

答案 0 :(得分:0)

我不清楚你想在这里实现什么。
但是,我不相信您所显示的方法无论是清洁还是推荐。

如果您想根据某种状态添加和删除功能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>

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