Polymer 0.9“过滤器”的最佳方法是什么？

Question

In 0.5 it was possible to add a JS-functions like:

PolymerExpressions.prototype.timeofdate = function(input) {
 if(input) {
   return input.substring(11,16)
}

(Extracting hour:minute from "MongoDB-timestamp" like 2014-10-04T12:34:56+02:00)

And use it with piped variable like:

{{starts | timeofdate}}

When I tried to upgrade the code above to 0.9, I had to create this element instead:

<script>
  Polymer({
    is: 'x-substr',
    properties: {
      start: Number,
      end: Number,
    },
    attached: function() {
      this.innerHTML = this.innerHTML.substring(this.start, this.end);
    }
  });
</script>

And use it like this:

<x-substr start="11" end="16">{{starts}}</x-substr>

(Use "attached" callback instead of "ready", if you should use this element with any data binding)

Is this the "right way" to do filter functionality like above in Polymer 0.9+?

Answer 1

The closest you will get to the filter behaviour in 0.5 are computed bindings in 0.9+.

For your example this would be something like this:

<dom-module id="...">
  <template>
    ...
    <span>{{timeofdate(starts)}}</span>
    ...
   </template>
<dom-module>

Polymer({
  ...
  timeofdate: function (input) {
    return input.substring(11,16);
  }
  ...
});

If you need this time in more than one place you could also make it a computed property instead.

<dom-module id="...">
  <template>
    ...
    <span>{{starttime}}</span>
    ...
   </template>
<dom-module>

Polymer({
  ...
  properties: {
    starts: String,
    starttime: {
      type: String,
      computed: 'timeofdate(starts)'
    }
  },
  timeofdate: function (input) {
    return input.substring(11,16);
  }
  ...
});