数据绑定属性的变化没有向上传播

Question

我嵌套了相互交互的自定义元素。

<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>

子自定义元素：

<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>

如果我没理解错，this.bindingTest = "change of binding test" 应该通知父自定义元素并且 "found" 参数应该等于 "change of binding test" 字符串，即 toParent 函数有被调用，但由于某种原因没有被调用。 bindingTest 更改时如何通知父级？

Answer 1

编辑：

这里的问题是您错误地访问了子元素的bindingTest 属性。来自 documentation

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

因此您需要将 custom-element 标签更改为：

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

我设置了一个plunkerhere给你看看

数据绑定属性的变化没有向上传播

Change in data bound property is not propagating upwards

javascript

web-component

polymer

数据绑定 属性 的变化没有向上传播

Change in data bound property is not propagating upwards

javascript

web-component

polymer

数据绑定属性的变化没有向上传播