Event bindings / handlers / listeners

balupton commented 10 years ago

It would be great if this supported event bindings too:

<!DOCTYPE html>
<head>
  <title>Polymer Template Binding Test</title>
  <meta name="description" content="Testing polymer's template binding to explore it's possibilities. Currently event handlers don't appear to work." />
  <script src="http://www.polymer-project.org/platform.js"></script>
</head>
<body>
  <template id="t" bind="{{}}">
    Hello {{name}} <button onclick="{{sup}}">Sup</button>
  </template>
  <script>
   var t = document.querySelector('#t');
   t.model = {
     name: 'Joe',
     sup: function(){
       alert('Hello '+t.model.name)
     }
   }
  </script>
</body>

Currently, clicking sup does nothing. Demo: http://jsbin.com/qapeq/edit

Happy to accept if there is a technical reason for why this is a really bad idea.

balupton commented 10 years ago

Another use case for this is avoiding the shadow dom when using polymer:

<!DOCTYPE html>
<head>

<title>GSKU — Simple</title>

<script src="#{SITE_URL}bower_components/platform/platform.js"></script>

<link rel="import" href="#{SITE_URL}bower_components/polymer/polymer.html" />
<link rel="import" href="#{SITE_URL}bower_components/core-ajax/core-ajax.html">

</head>
<body>

<template id="t" bind="{{}}">
    <core-ajax auto url="//localhost:8000/usku" handleAs="json" on-core-response="{{parseUSKUS}}"></core-ajax>
    Hello {{name}}
</template>
<script>
    var t = document.querySelector('#t')
    t.model = {
        name: 'Joe',
        parseUSKUS: function(){
            debugger; // never reached
        }
    }
</script>

</body>

jmesserly commented 10 years ago

you can currently use these inside a polymer element: http://www.polymer-project.org/docs/polymer/databinding.html#event-handling-and-data-binding

there is some debate if it can be moved into https://github.com/Polymer/polymer-expressions, and it was supported in https://github.com/Polymer/polymer-expressions/issues/20 but I think has since been reverted. I'll ping over at that issue

googlearchive / TemplateBinding

Event bindings / handlers / listeners #178