Wie wird eine Elementfunktion in einem Templatpolymer verwendet?

Question

Ich möchte eine Funktion verwenden, die im Element definiert ist. Wie folgt:

<template> 
<span onclick="this.parentElement.test();"></span> 
</template> 

<script> 
Polymer({ 
    is: 'test-ele', 
    test: function() { 
    console.log('This is a test message.') 
    } 
}) 
</script> 

Gibt es einen ähnlichen Ansatz?

<template> 
<span onclick="{{{test}}}"></span> 
</template> 

Answer 1

Um Ereignis-Listener zu lokalen DOM Kinder, verwenden on- Ereignis Anmerkungen in Ihrer Vorlage hinzuzufügen. Dies beseitigt oft die Notwendigkeit, einem Element eine ID nur zum Zweck des Bindens eines Ereignis-Listeners zu geben.

Quelle: https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

<dom-module id="test-ele"> 
    <template> 
    <span on-click="test">Click Here</span> 
    </template> 

    <script> 
    Polymer({ 
     is: 'test-ele', 
     test: function() { 
     console.log('This is a test message.'); 
     } 
    }); 
    </script> 
</dom-module> 

Answer 2

Die einfache Antwort ist no, you can't. <span onclick="{{{test}}}"></span> versucht, die Funktion {{{test}}} zu initiieren, anstatt sie als Template-Variable zu lesen.

Außerdem ist Ihr erstes Beispiel falsch.

<template> 
<span onclick="this.parentElement.test();"></span> 
</template> 

wird versuchen, this.parentElement.test(); als die Funktion zu laden. Einfach

Polymer weiß, es sollte eine Funktion im übergeordneten Element aufrufen.