简体   繁体   中英

How to call function defined inside Polymer Custom Element and pass arguments?

I have html page using polymer builtin elements along with my customElement( my-form )

<dom-module id="my-form">
    <template>
        <div>
            <paper-input id="inputName" label="Name" required error-message="Required Input" value="{{data.name}}"> Name </paper-input>
            <paper-input id="inputAge" label="Age" required error-message="Required Input" value="{{data.age}}"> Age </paper-input>
            <div class="rows layout horizontal">
                <paper-button id='cancelBtn' tabindex="0">Cancel</paper-button>
                <paper-button id='saveBtn' tabindex="0">Save</paper-button>
            </div>
        </div>
    </template>
</dom-module>
<script>
    Polymer({

        is: 'my-form',

        created: function() {
            var saveBtn = document.querySelector('#saveBtn');
            saveBtn.addEventListener('click', function() {
                document.getElementById('inputName').validate();
                document.getElementById('inputAge').validate();
            });

            //initial value
            this.data = {};  

        },

        properties: {
            data: {
                type: Object,
                value: {},
            },
        }

        //load my-form with data provided  
        refreshFormUI: function(dataReceived) {
            this.data = dataReceived;
            console.log("refreshFormUI() -  name = " + this.data.name);
            console.log("refreshFormUI() -  age = " + this.data.age);
        },

    });
</script>

I need to pass the " data "object from a external javascript file. I tried the following but I dont see the refreshFormUI() being called.

external_js_file.js :

function someEvent() {
    my_form_element = document.querySelector('#my_form_element');
    var mockData = {
        name: "Demo Name",
        age: '20',
    };
    my_form_element.refreshFormUI(mockData);
}

您正在设置this.data =但随后在console.log使用的是data.name而不是this.data.name

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM