Databinding to defineProperty with getter/setter not working

[JPuge]

Hi,

I'm trying to use Polymers databinding together with defineProperty's ability to have getters and setters for objects. I have created a small example to showcase what I think is not working. Hopefully its my code that doesn't work, and you can tell me why. The code can be seen below. 

I have created the property "value" with defineProperty and provided getter and setter functions. Then I have bound the value of the property "value" to the content of a span and value of an input element. When I change the value of the index, I can see that the value of the property is changed correctly using the log message. I can also see that the getter is call, and that the value returned from the getter is actually the new value (the one in the input field). The problem is that the content of the span is not updated! This is a bug, right?

The code has been tested in Canary 34 with experimental javascript turned on.

<link rel="import" href="bower_components/polymer/polymer.html"/>

<polymer-element name="gs-element" attributes="objProp">

  <template>

    <span> {{objProp.value}}</span><br/>

    <input id="statusInput" type="text" value="{{objProp.value}}" /><br/>

    <br/>

    <span> {{objProp.otherValue}}</span><br/>

    <input id="statusInput" type="text" value="{{objProp.otherValue}}" /><br/>

  </template>

  <script>

    'use strict';

    var o = {};

    var myVal = "hi there";

    Object.defineProperty(o, "value", {

      get: function() { 

        console.log("Checked! Value: %s", myVal);

        return myVal; 

      },

      set: function(newVal) { 

        myVal = newVal; 

        console.log("Changed value: " + newVal); 

      },

      enumerable: true,

      configurable: true 

    });

    

    Object.defineProperty(o, "otherValue", {

      value: "I am other",

      writable: true,

      enumerable: true,

      configurable: true

    });

  Polymer("gs-element", {

      objProp: o

  });

  </script>

</polymer-element>

Hope you can help me, because I would really like try using Polymer and getters/setters for objects.

- JPuge

[jespe...@gmail.com]

I have discovered that this works in chrome 32 (not canary), the both spans are updated to match the input fields.

[Steve Orvell]

Polymer sets up a property observer for you so you should not have to setup a getter/setter like this. If you simply include a method named 'objPropChanged', it'll be called whenever the property changes.

objPropChanged: function(oldValue) {

  // ....

}

You can customize the name of that method by using an observe block like this:

observe: {

  objProp: '<methodName>'

 }

It's possible to use a getter/setter like you've done, but we don't encourage it because it's a bit more work. To be compatible with Object.observe, which Polymer uses when Chrome's experimental javascript flag is on, you'll need to use Object.observe's notification api. See the examples here for more information: http://wiki.ecmascript.org/doku.php?id=harmony:observe_api_usage.

On Sat, Feb 1, 2014 at 2:29 PM, <jespe...@gmail.com> wrote:

I have discovered that this works in chrome 32 (not canary), the both spans are updated to match the input fields.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8bbc6fde-f010-4b4b-b0d5-57ba0eed09f8%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

[jespe...@gmail.com]

Thanks for the reply! 

I was looking into getters and setters because I wanted to throw some events when properties was changed, which for instance would allow a persistency layer to detect changes. I guess this could be dones more easily with Object.observe, and I will look into the observer functions set up by Polymer and possibly also the Object.observe's notification API.

Thanks again.