Question

我已经设置了一个模板，该模板从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>

我已经尝试了很多方法来获得所选纸质广播组的价值但没有成功，任何帮助都将不胜感激

Answer 1

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

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

结果是，为了访问嵌套组件的shadow DOM中的节点，你需要使用像

这样的东西

this.$.idOfgraphOptionsLoadTest.$.idOfRadioGroup，当您为元素定义了id属性时;
this.shadowRoot.querySelector('graphOptionsLoadTest').shadowRoot.querySelector('paper-radio-group')，无论是否定义了id属性;或
两者的某种组合，当一个组件具有id s而另一个组件没有<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: </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>并使用上面的第一个选项。

示例代码

不幸的是，如果没有我猜测的东西托管它，你的代码就很难使用。因此，我创建了以下内容来说明原则：

{{1}}

祝你好运！

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

1 个答案:

示例代码