从聚合物元素返回简单值

Return simple value from polymer element?

本文关键字：简单 返回 元素 聚合物      更新时间：2023-09-26

我已经成功地使用core-ajax来传递json对象，但是我想编写一个可以传递简单值的自定义元素。这是我的，但它不能工作。

testOutput元素 

<link rel="import" href="../polymer/polymer.html">
<polymer-element name="testOutput">
    <template>
        This doesn't do anything but output a value.
    </template>
    <script>
        Polymer('testOutput', {
            response: "MyValue"
        });
    </script>
</polymer-element>

testInput元素

<link rel="import" href="../polymer/polymer.html">
<polymer-element name="testInput" noscript attributes="input">
    <template>
        Here is the value from the other element:
        <h1>{{input}}</h1>
    </template>
</polymer-element>

index . html 

<testOutput response="{{output}}"></testOutput>
<testInput input="{{output}}"></testInput>

这只是输出一个值。

这是另一个元素的值:

我只需要在输出元素中发布响应变量。您可以通过将其包含在属性中或使用publish函数来实现。

<polymer-element name="testOutput" attributes="response">

或

    Polymer('testOutput', {
        publish: {
            response: "MyValue"
        }
    });

我认为你的回应应该是一个函数。

Polymer('testOutput', {
        response: function() { return "MyValue" };
    });

我认为有两种方法可以做到

第一种方法

你需要在你想要获取数据的地方创建元素:

<polymer-element name="first-element">
    <template>
    </template>
    <script>
    Polymer('first-element',{
        needPass: 'I am Passed'
    });
    </script>
</polymer-element>

在您需要使用querySelector获取第一个元素并获取数据后

<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="second-element">
    <template>
        <style>
            :host{
                width: 100%;
                height: 100%;
            }
        </style>
        <h1>{{passed}}</h1>
    </template>
    <script>
    Polymer('second-element',{
        passed: '',
        ready: function(){
            var first_el = document.querySelector('first-element');
            this.passed = first_el.needPass;
        }
    });
    </script>
</polymer-element>

然后调用索引

中的元素
<first-element></first-element>
<second-element></second-element>

第二种方式

或者你可以将第一个元素调用到第二个元素

第一个元素:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="first-element" attributes="needPass">
    <template>
    </template>
    <script>
    Polymer('first-element',{
        needPass: 'I am Passed'
    });
    </script>
</polymer-element>
第二元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="first-element.html">
<polymer-element name="second-element">
    <template>
        <style>
            :host{
                width: 100%;
                height: 100%;
            }
        </style>
        <first-element needPass="{{needPass}}"></first-element>
        <h1>{{needPass}}</h1>
    </template>
    <script>
    Polymer('second-element',{
        ready: function(){
        }
    });
    </script>
</polymer-element>

和调用索引的第二个元素

我希望这对你有帮助。

PS:我测试了代码

相关文章：