将聚合物元素中的值绑定到父页面

时间:2015-09-08 13:54:18

标签: binding polymer-1.0

我制作了一个简单的ploymer元素,我需要在包含该聚合物元素的页面上更改输入值。

<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="dial-buttons/dial-buttons.html">
  </head>
  <body>
    <input type="text" name="dial-number" id="num-input" />
    <paper-material elevation="1">
      <dial-buttons></dial-buttons>
    </paper-material>
  </body>
</html>

这是元素代码:

<dom-module id="dial-buttons">

    <template>
        <div on-click="handleClick" data-args="0, num-input">
            <p>0</p>
            <span>+</span>
            <paper-ripple></paper-ripple>
        </div>
    </template>

    <script>
        Polymer({
            is: 'dial-buttons',
            handleClick: function(e) {
                var args = Polymer.dom(e).path[1].getAttribute('data-args').split(',');
                document.getElementById(args[1]).value = args[0]; //Here is the issue!
            }
        });
    </script>

</dom-module>

我想在这里尝试实现的是,在&#34;拨号按钮上的点击事件&#34; element很奇怪,父页面上的输入值应该得到从这个子元素发送的值。

1 个答案:

答案 0 :(得分:0)

检查documentation中的该部分。

你创建一个名为let的myTar属性,你将notify设置为true(就像第一个例子一样)。在函数内部将this.myVar设置为您想要的值,它应该反映到您在父元素中绑定的属性。