获取模板中纸质单选按钮的值答案

【问题标题】：Getting the value of a paper-radio-button inside a template获取模板中纸质单选按钮的值
【发布时间】：2015-04-13 12:18:09
【问题描述】：

我已经设置了一个模板，该模板从 JSON 文件中的一些数据中提取标题，然后从这些标题中创建一组纸质单选按钮。当我调用此模板时（在纸张阴影中），当我单击提交时（在纸张阴影中），我无法捕获所选纸张单选按钮的值。

这是在纸影中生成的内容：

<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>

这是纸质单选按钮模板：

<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>

我尝试了多种方法来获得所选纸质无线电组的价值，但均未成功，我们将不胜感激

【问题讨论】：

标签： javascript polymer material-design

【解决方案1】：

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

首先，您只能使用$ 哈希来访问模板中使用id 属性定义的节点。要访问其他节点，例如动态定义或没有id 属性的节点，您可以使用querySelector 方法。此方法还允许您按选择器搜索（有点像 JQuery）。此外，要访问 Polymer 组件的 shadow DOM 中不具有id 属性的节点，您可以使用shadowRoot 成员。这些想法在 Automatic Node Finding 的 Polymer 文档中进行了讨论，更详细地，在 Shadow DOM 部分中进行了讨论。（此外，<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>

祝你好运！

【讨论】：

嘿乔佩 - 这太完美了！真的帮助我更多地了解如何在影子 DOM 中工作 - 我有时真的很难达到正确的粒度，尽管 this.$.headerValue.selectedItem 会让我到达那里（也感谢你在我的模板调用
另外，如果有人想要它，我创建了一个 plunker，其中包含 Joppe 的代码plnkr.co/edit/CrS9n9iZ8pusqJcYijrz?p=preview