Docs on creating custom filters #225

Closed
ebidel opened this Issue Jan 8, 2014 · 6 comments

Projects

None yet

4 participants

Owner
ebidel commented Jan 8, 2014

Tests: https://github.com/Polymer/polymer-expressions/blob/master/tests/tests.js#L96

PolymerExpressions.prototype.upObject = function(value) {
  return {
    toDOM: function(value) {
      var parts = [];
      console.log("I see value", value);
      for (var key in value) {

        parts.push(dict[key].toUpperCase())
      }
      return parts.join('; ');
    }
  };
};
arv commented Jan 8, 2014

That is not entirely correct. The function should return the value. To do the inverse transformation add a toModel on the function:

PolymerExpressions.prototype.upObject = function(value) {
  var parts = [];
  console.log("I see value", value);
  for (var key in value) {
    parts.push(dict[key].toUpperCase())
  }
  return parts.join('; ');
};
PolymerExpressions.prototype.upObject.toModel = function(value) {
  ...
  return modelObject;
};
Owner
ebidel commented Jan 8, 2014

Thanks @arv. I hadn't dove into any of this yet. What about toDOM? Is that no longer required?

arv commented Jan 8, 2014

toDom is implied now.

Before:

PolymerExpressions.foo = {
  toDom: funcA,
  toModel: funcB
};

now

PolymerExpressions.prototype.foo = funcA;
PolymerExpressions.prototype.foo.toModel = funcB;

@rafaelw To review that.

Member
sorvell commented Jan 8, 2014

Custom filters are also now supported directly on the model, the custom element. The syntax is the same as @arv noted above. If the filter itself is a function then that function becomes the toDom value of the filter.

So, in some polymer-element...

<div>{{'thingy' | upperCaseFilter}}</div>

...
upperCaseFilter: function(value) {
  return value.toUpperCase();
}

// which is the same as
upperCaseFilter: {
  toDom: function(value) {
    return value.toUpperCase();
  }
  // add toModel when it makes sense...
}
Owner
ebidel commented Jan 8, 2014

Awesome. Didn't realize this was already supported on elements models.
Thanks fellas.

On Wed, Jan 8, 2014 at 12:30 PM, Steve Orvell notifications@github.comwrote:

Custom filters are also now supported directly on the model, the custom
element. The syntax is the same as @arv https://github.com/arv noted
above with 1 addition. If the filter itself is a function then that
function becomes the toDom value of the filter.

So, in some polymer-element...

{{'thingy' | upperCaseFilter}}

...
upperCaseFilter: function(value) {
return value.toUpperCase();
}

// which is the same as
upperCaseFilter: {
toDom: function(value) {
return value.toUpperCase();
}
// add toModel when it makes sense...
}


Reply to this email directly or view it on GitHubhttps://github.com/Polymer/docs/issues/225#issuecomment-31874715
.

@ebidel ebidel added the P0 label Apr 3, 2014
Contributor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment