Better way to do extending?

[Filipe Araujo]

I am trying to build 3 components, one being a model ( ui-contact )  and two that extends from that model ( ui-contact-form, ui-contact-chip ).  I am running into the issue that when ui-contact-chip houses a ui-contact-form the name updates are triggering twice.  

What happens on updating input

• data-bind updates ui-contact-form value
• nameChanged triggered on ui-contact that ui-contact-form inherits from
• data-bind link between form and chip updates ui-contact-chip value
• nameChanged triggered on ui-contact that ui-contact-chip inherits from
  

Is there a better way to do this?

https://gist.github.com/filaraujo/ec9f0ff49718602de139

[Michael Bleigh]

I don't think  you want to be extending ui-contact in this case, but rather using it as an internal element. I can't speak definitively because the code provided is too barebones to reveal intention, but I would imagine it would be something more like:

<template repeat="{{contact in contacts}}">
  <ui-contact-chip contact="{{contact}}"></ui-contact-chip>
</template>

Where ui-contact-chip would be defined more like:

<polymer-element name="ui-contact-chip" attributes="contact">
  <template>
    <ui-contact id="contact" data="{{contact}}"></ui-contact>
    <template bind="{{$.contact}}" if="{{$.contact.name}}">
      <div>{{name}}</div>
    </template>
  </template>
</polymer-element>

This is just rough and spitballing, but the point is that extension should be thought of like class inheritance. You're saying that ui-contact-chip IS A ui-contact. What I think you want instead is to say that ui-contact-chip REFERENCES A ui-contact.

[Filipe Araujo]

That makes more sense, I'll give this a go and see how it pans out.

[Pascal Precht]

I've written an article about "Inheritance and composition in Polymer" maybe that one is interesting for you: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

[Filipe Araujo]

great read, thank you