ส่งคืนค่าอย่างง่ายจากองค์ประกอบโพลีเมอร์หรือไม่

ฉันใช้ 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>

ดัชนี.html

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

เอาท์พุท

สิ่งนี้ไม่ได้ทำอะไรนอกจากส่งออกค่า

นี่คือค่าจากองค์ประกอบอื่น:


javascript polymer
person JOATMON    schedule 04.08.2014    source แหล่งที่มา
comment
ดูโพสต์นี้: stackoverflow.com/q/25050120/723693   -  person ain    schedule 04.08.2014
comment
ฉันควรจะสังเกตว่าฉันกำลังใช้เทมเพลตการผูกอัตโนมัติ ขอโทษ.   -  person JOATMON    schedule 04.08.2014

คำตอบ (3)


arrow_upward
1
arrow_downward

ฉันเพียงแค่ต้องเผยแพร่ตัวแปรตอบสนองในองค์ประกอบเอาต์พุตของฉัน คุณสามารถทำได้โดยรวมไว้ในแอตทริบิวต์หรือใช้ฟังก์ชันเผยแพร่

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

or

    Polymer('testOutput', {
        publish: {
            response: "MyValue"
        }
    });
person JOATMON    schedule 04.08.2014

arrow_upward
0
arrow_downward

ฉันคิดว่าคำตอบของคุณควรเป็นฟังก์ชัน

Polymer('testOutput', {
        response: function() { return "MyValue" };
    });
person tire0011    schedule 04.08.2014

arrow_upward
0
arrow_downward

ฉันคิดว่ามีสองวิธีที่จะทำ

วิธีแรก

คุณต้องสร้างองค์ประกอบที่คุณต้องการรับข้อมูล:

<polymer-element name="first-element">
    <template>

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

หลังจากที่คุณจำเป็นต้องได้รับองค์ประกอบแรกโดยใช้ querySelector และรับข้อมูล

<link rel="import" href="/th../../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="/th../../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="/th../../bower_components/polymer/polymer.html">

<link rel="import" href="/thfirst-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: ฉันทดสอบรหัส

person Donearh    schedule 05.08.2014