Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to override computed property? #4974

Closed
yairopro opened this issue Dec 5, 2017 · 4 comments
Closed

How to override computed property? #4974

yairopro opened this issue Dec 5, 2017 · 4 comments

Comments

@yairopro
Copy link

yairopro commented Dec 5, 2017

Description

How to override computed property?
For instance, how to add a dependency to the compute function, or replace the compute function with another, from the child class.

Live Demo

Here's a snippet where the parent class A computes the result property to be equal to the value property, while its child class B would recompute the result property to be equal to value + value2.
But the override doesn't work...
http://jsbin.com/hoqeyucize/1/edit?html,js,output

Here's the stackoverflow.

Expected Results

The computed property to be computed as the child class redefines the compute function.

Actual Results

The computed property is computed as the parent class defined the compute function, and cannot be overridable.

Versions

  • Polymer: v2.0.0
  • webcomponents: v1.0.20
@yairopro yairopro changed the title Polymer - How to override computed property? How to override computed property? Dec 5, 2017
@masonlouchart
Copy link

I'm curious to know why override a computed property?

IMHO, a computed property is computed by an element and this one knows better than me how to compute it (or there is a bug to fix). So, when I extend the element and the child has also a computed property, this one can't has the exact same value. There is something more or something less. Why not just use an other property?

I'm thinking about if I want to use your-super-element that extend super-element and I want use the computed property (that you overwrote) of the parent of your-super-element. Should I override it again or directly extend super-element and re-implement the behaviors of yours? Maybe there is a pattern or something that I don't know.

On principle I agree, child should overrides parent definitions.

@yairopro
Copy link
Author

yairopro commented Dec 7, 2017

The main reason is: polymorphism

My use case is the following:
I have a abstract component Input. This component has 3 main properties:

 {
      /**
        * The current value of the input. It can be anything, string, number, object, array..
        */
      value : {},

      /**
        * Indicates if a value is required in the input to be valid.
        */
      required : {
             type : Boolean,
             value : false,
      }

      /**
        * Indicates if the value property is currently valid.
        */
      valid : {
             type : Boolean,
             computed : "isValid(value, required)"
      }
 }

The valid property is computed by the function isValid. Its default implementation is just:
return !this.required || !!this.value But that's only de default implementation.

Now let's say I've got a child input component, which inherits from the abstract Input component, but its valid property should be computed with a 3rd dependency parameter. For instance, the value of my input is an Array, and the Input would be valid only if the Array has at least one item inside it. Then I will have to add a 3rd dependency to my function isValid(value, requires, value.length) (or even isValid(value, requires, value.splices) if I need to check the content of my array value).
In cases like this one (there are a lot of case where the parent's compute function is just a default implementation), I need to override the compute function, in order to add/remove a dependency parameter, or even compute the property in a completely different way.

Now the reason why to compute another property is not a solution is because we lose polymorphism.
Let's take back our abstract Input component. Now that It has a computed property valid, it's possible to create a another component, like auto-form, which, on call auto-form.validate(), would pass over all Input component it contains in its own DOM, and check their valid properties.
I would like to avoid to run a function validate(), instead of directly read a property, because it will have to call it on each Input component, and the more inputs it has, and the more complex they are, the more latency it will take.

@stale
Copy link

stale bot commented Mar 13, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Mar 13, 2020
@stale
Copy link

stale bot commented Apr 16, 2022

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!

@stale stale bot closed this as completed Apr 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants