2017-12-01 19 views
1

ポリマー成分に挿入されたhtml文字列に存在する 'on-tap'イベントをトリガするにはどうすればいいですか?内側の-h-t-m-lのポリマー結合on-tapイベント

<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中にタップイベントがポリマーイベントにコンパイルされていないと思います。

予想される出力: 私は、HTMLレンダリング文

答えて

0

でアンカータグを「クリック」をクリックしたとき、あなたがここに達成したいものを私には本当に明確ではない出力'tap event has happened!'を見ることができるはずです。
しかし、私はあなたの示されたアプローチがどちらかの方法できれいであるとは思わないか、または推奨しています。

あなたは、いくつかの状態に応じて機能を追加および削除する場合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> 

あなたの目標はここにはっきりしていません。

関連する問題