Change in data bound property is not propagating upwards

Question

I have nested custom elements which interact with each other.

<dom-module id="dom-element">   
  <template>
    <custom-element bindingTest="{{found}}"></custom-element>
  </template>  
  <script>
    Polymer({
      is: "dom-element",
      properties: {
        found: {
          type:String,
          value:"4"
        }
      },
      ready: function() {
        this.addEventListener("found-changed", this.foundChanged);
      },
      foundChanged:function(e){
        console.log("found changed");
      }  
    });
  </script>
</dom-module>

Child custom element:

<dom-module id="custom-element">
  <template>
    <button on-click="toParent">Send to parent</button>
  </template>
  <script>
    Polymer({
      is: "custom-element",
      properties:{
        bindingTest: {
          type: String, 
          notify: true
        }
      },
      toParent: function () {
        this.bindingTest = "change of binding test"
      }
    });
  </script>
</dom-module>

If I understood correctly, this.bindingTest = "change of binding test" should notify parent custom element and "found" parameter should become equal to "change of binding test" String, that is, toParent function has to be called, but it isn't being called for some reason. How do I notify parent when bindingTest changes?

Answer 1

EDIT:

The problem here is that you are accessing the bindingTest property of the child element incorrectly. From the documentation

In order to configure camel-case properties of elements using attributes, dash- case should be used in the attribute name.

So you will need to change your custom-element tag to be:

<custom-element binding-test="{{found}}"></custom-element>

I've set up a plunker here for you to look at.