在模板中获取 paper-radio-button 的值

Question

我已经设置了一个模板，它从 JSON 文件的一些数据中提取 headers，然后从那些 headers 中创建一组 paper-radio-buttons。当我调用此模板（在 paper-shadow 中）时，当我单击提交（在 paper-shadow 中）时，我无法捕获所选 paper-radio-button 的值。

以下是 paper-shadow 中生成的内容：

<polymer-element name="add-graphItem">
    <template>
        <div id="div" layout horizontal>
            <paper-button raised class="colored" self-center>Upload File</paper-button>
            <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
                <input is="core-input" id="graphSource" required>
            </paper-input-decorator>
        </div>
        <div layout horizontal center-justified id="upload-options"> 
            <paper-shadow class="card upload-options-box" z="1">
                <core-header-panel flex id="graphHeaderList">
                    <core-toolbar class="upload-option-header">
                      <span flex>Variable</span>
                    </core-toolbar>
                    <graph-optionsLoadTest><graph-optionsLoadTest> <!-- this is where I call the paper-radio-button -->

            </core-header-panel>
        </paper-shadow>
        <paper-shadow class="card upload-options-box" z="1">
            <core-header-panel flex>
                <core-toolbar class="upload-option-header top">
                  <span flex>Transform</span>
                </core-toolbar>
                <div class="upload-options">
                    <graph-functionsLoad><graph-functionsLoad> <!-- I also do another set here but I'm just working on the one for now since they do the same thing -->
                </div>
            </core-header-panel>
        </paper-shadow>
    </div>

    <paper-button dismissive hover on-tap="{{cancelGraph}}">Cancel</paper-button>
    <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>

</template>
<script>
    Polymer("add-graphItem",{
        addNewGraph: function () {

            console.log(this.$.headerValue.selectedItem);
            var hValue = this.$.headerValue.selectedItem;
            console.log(hValue);
        },

        cancelGraph: function () {
            this.$.addGraph.toggle();
        },
    })
</script>

这里是 paper-radio-button 模板：

<link rel="import" href="/static/bower_components/core-ajax/core-ajax.html">

<polymer-element name="graph-optionsLoadTest">
    <template>
        <core-ajax auto url="/getDataHeaders"
               handleAs="json" response="{{headerList}}"></core-ajax>

        <paper-radio-group id="headerValue">
            <template repeat="{{h in headerList.headers}}">
                <paper-radio-button name='{{h}}' label='{{h}}'></paper-radio-button>
            </template>
        </paper-radio-group>

    </template>

    <script>

        Polymer( "graph-optionsLoadTest", {
            headerListChanged: function(oldValue) {
                console.log(this.headerList);

                // this.headers;
            }

        });


    </script>
</polymer-element>

我已经尝试了很多方法来获取所选的值 paper-radio-group 但没有成功，任何帮助将不胜感激

Answer 1

迈克，我看到了一些可能对你有帮助的问题。

首先，您只能使用 $ 散列访问模板中使用 id 属性定义的节点。要访问其他节点，例如那些动态定义或没有 id 属性的节点，您可以使用 querySelector 方法。此方法还允许您按选择器搜索（有点像 JQuery）。此外，要访问不具有 id 属性的 Polymer 组件的影子 DOM 内的节点，您可以使用 shadowRoot 成员。 Automatic Node Finding and, in more detail, in the section on Shadow DOM 的 Polymer 文档中讨论了这些想法。（此外，<graph-optionsLoadTest> 元素的结束标记缺少 /。）

结果是，为了访问嵌套组件影子中的节点 DOM，您需要使用

this.$.idOfgraphOptionsLoadTest.$.idOfRadioGroup，当您为元素定义了 id 属性时；
this.shadowRoot.querySelector('graphOptionsLoadTest').shadowRoot.querySelector('paper-radio-group')，是否定义了id个属性；或
两者的某种组合，当一个组件有 ids 而另一个没有。

我建议给 <graph-optionsLoadTest> 元素一个 id 并使用上面的第一个选项。

示例代码

不幸的是，如果没有我推测托管它的部分，您的代码将很难使用。因此，我创建了以下内容来说明原理：

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
        <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
    </head>
    <body unresolved fullbleed>
        <polymer-element name="options-load" attributes="selected">
            <template>
                <paper-radio-group id="headerValue" selected="{{selected}}">
                    <template repeat="{{h in headerList.headers}}">
                        <paper-radio-button name='{{h}}' label='{{h}}' style="height: 100px"></paper-radio-button>
                    </template>
                </paper-radio-group>
            </template>
            <script>
                Polymer({
                    created: function() {
                        this.selected = 0;
                        this.headerList = {
                            headers: ['Option 1', 'Option 2', 'Option C']
                        };
                    }
                });
            </script>
        </polymer-element>

        <polymer-element name="add-graph-item">
            <template>
                <div layout horizontal around-justified>
                    <div>Options:</div>
                    <options-load id="optionsLoad"></options-load>
                    <button on-tap="{{doIt}}">Go</button>
                    <div>Results:&nbsp;</div>
                    <div id="results"></div>
                </template>
                <script>
                    Polymer({
                        doIt: function(event, detail, sender) {
                            var radioVal = this.$.optionsLoad.$.headerValue.selectedItem;
                            var msgTxt = 'Go clicked; ' + radioVal.label + ' selected'
                            console.log(msgTxt);
                            this.$.results.innerText = msgTxt;
                        }
                    });
                </script>
            </polymer-element>

            <add-graph-item></add-graph-item>

        </body>
    </html>

祝你好运！

在模板中获取 paper-radio-button 的值

Getting the value of a paper-radio-button inside a template

javascript

polymer

material-design

示例代码