Polymer 1.0与父元素的双向数据绑定

时间:2015-10-15 17:33:42

标签: javascript data-binding polymer

我有这个简单的子元素:

<dom-module id="child-element">
    <template>
        <button on-click="holaClick">Hola local</button>
        <button on-click="darNombre">Hola otro element</button>
         <input is="iron-input" bind-value="{{pp}}"
           placeholder="Your name here...">
    </template>
    <script>
        Polymer({
            is: "child-element",
            properties: {
                pp: {
                    //Boolean, Date, Number, String, Array or Object
                    type: String,
                    value: "Valor por defecto de la property"
                }
            },
            holaClick:function(){
                alert("AA: "+this.pp);
            }

        });
    </script>
</dom-module>

我有这个父元素:

<?=  $this->element('Polymer/test-element'); ?>
<dom-module id="proto-element">
    <template>

        <!-- scoped CSS for this element -->
        <style>
            p {
                color: red;
            }
        </style>
        <div>
            <!-- any children are rendered here -->
            <content>
                <p>hola3</p>
                <p2>Este es dinamico: <b>{{myvariable}}</b></p2><br>
                <p2>Esta es una property: <span>{{myproperty}}</span></p2><br>
                <p2>Esta es una property que cambie desde el html: <b>{{myproperty2}}</b></p2><br>
                <p2>Esta es una property que esta bindeada al iron-input: <b>{{myproperty3}}</b></p2><br>
                <input is="iron-input" bind-value="{{myproperty3}}"
                   placeholder="Your name here...">
            </content>
        </div>
        <test-element pp="{{myproperty3}}"></test-element>
    </template>
    <script>
        // register a new element called proto-element
        Polymer({
            is: "proto-element",
            properties: {
                myproperty: {
                    //Boolean, Date, Number, String, Array or Object
                    type: String,
                    value: "Valor por defecto de la property"
                },
                myproperty2:String,
                myproperty3:{
                    //Boolean, Date, Number, String, Array or Object
                    type: String,
                    value: "Valor por defecto de la property 3"
                }
            },
            ready: function() {
                this.myvariable = "soy un atributo del elemento!"
            },
            darNombre: function(){
                alert("BB");
            }
        });
    </script>
 </dom-module>

当我更改父元素的铁输入时,绑定工作正常。但是当我更改子元素的铁输入时,父元素不会更新。我怎样才能做到这一点?

谢谢

1 个答案:

答案 0 :(得分:1)