如何调用Polymer Custom Element中定义的函数并传递参数？ [英] How to call function defined inside Polymer Custom Element and pass arguments?

问题描述

我有使用聚合物内置元素的html页面以及我的customElement（ my-form ）

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>

我需要从外部javascript文件传递数据对象。我尝试了以下操作，但我没有看到 refreshFormUI（） 被调用。

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：

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 。

You're setting this.data = but then in your console.log you're using data.name instead of this.data.name.

这篇关于如何调用Polymer Custom Element中定义的函数并传递参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！