Skip to content

Binding undefined does not work as expected #1813

Closed
Closed
Binding undefined does not work as expected#1813

Description

@arodic
arodic
opened on Jun 10, 2015

When binding property of a parent to property of a child, parent's property value is used.

However, if parent's property does not have default value, or default value is explicitly set to undefined, child's property value is used instead.

Personally, I find this unintuitive and it breaks applications that deal with undefined values. For example, a value that is supposed to be undefined can suddenly become null, false, empty string or whatever is the default value of the element you bind it to.

This also applies to sibling elements. It appears that priority of values in binding corresponds to the order of elements in DOM, except if the value is undefined.

Below is a code that illustrated the problem:

<dom-module id="child-el">
  <template>{{value}}</template>
</dom-module>
<script>
  Polymer({
    is: 'child-el',
    properties: {
      value: {
        value: false,
        notify: true,
        observer: '_valueChanged'
      }
    },
    _valueChanged: function() {
      console.log('child-el value changed:', this.value);
    }
  });
</script>

<dom-module id="parent-el">
  <template><child-el value="{{value}}"></child-el></template>
</dom-module>
<script>
  Polymer({
    is: 'parent-el',
    properties: {
      value: {
        value: undefined,
        notify: true,
        observer: '_valueChanged'
      }
    },
    _valueChanged: function() {
      console.log('parent-el value changed:', this.value);
    }
  });
</script>

If you add parent-el to the DOM you will notice that its value is set to false while it should be undefined.

Activity

  1. punzki commented on Jun 10, 2015

    @punzki
    punzki
    on Jun 10, 2015

    Firstly, your property must have an explicit type, in this case you want it to be a Boolean. I don't really know how Polymer interprets the property's type since you didn't give an explicit one.

    If it were a Boolean property, its value is is set based on the existence of the corresponding HTML attribute (value, in this case). https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-deserialization :

    Boolean properties set based on the existence of the attribute: if the attribute exists at all, its value is true, regardless of its string-value (and the value is only false if the attribute does not exist).

    ...so the absence of the value HTML attribute means the value of value property is false.

  2. kevinpschaaf commented on Jun 15, 2015

    @kevinpschaaf
    kevinpschaaf
    on Jun 15, 2015
    Member

    Polymer uses undefined to mean exactly that -- a sentinel indicating when the value does not yet have a user-defined value, and gives special affordances to undefined under that assumption. So its best to avoid defining user-facing an API where changes to undefined should do something useful, and instead use null for those cases (which is treated as defined).

  3. kevinpschaaf
    closed this as completedon Jun 15, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions