Polymer filter doesn't work

Question

This polymer filter isn't working:

<polymer-element name="my-ele">
    <template><content></content></template>
    <script>Polymer({
         publish : {
             name : "hello"
         }
         myFilter : function (val) { return "test";}
    })</script>
</polymer-element>
<my-ele><span>{{name | myFilter}}</span></my-ele>

The content inside the span is blank. What's wrong?

Answer 1

You're trying to use data-binding and filters outside of polymer-element. That won't work.

To use data-binding outside of polymer, you can use an auto-binding template and reference the element's myFilter method using automatic node finding ($):

<template is="auto-binding">
  <my-ele id="myelem">
    <span>{{name | $.myelem.myFilter}}</span>
  </my-ele>
</template>