javascript - 数据绑定(bind)属性的更改不会向上传播

标签 javascript polymer web-component

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

<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 函数,但由于某种原因它没有被调用。当绑定(bind)测试发生变化时,如何通知家长?

最佳答案

编辑:

这里的问题是您错误地访问了子元素的 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>

我已经设置了一个plunker here供您查看。

关于javascript - 数据绑定(bind)属性的更改不会向上传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31311864/

相关文章:

javascript - 为表格中红色背景的行添加跑马灯效果

javascript - 如何设置数据表?

javascript - Webpack 直接注入(inject) js/css 文件内容到 index.html

javascript - Polymer 1.0 尝试制作一种类似于核心 split 器的 split 器,可以称为铁 split 器

reactjs - 使用 React 渲染带有子内容的 Polymer 1.0 元素

javascript - position().top 不一致 when (zoom < 1)

javascript - Braintree 托管字段未在 Polymer 上渲染

javascript - 将整个 HTML 页面导入到另一个页面

dart - 使用Polymer-Dart为标签Web组件创建标签标题

javascript - Vuetify 构建为 Web 组件样式未显示