Fatal编程技术网
  • javascript/
  • Javascript 获取模板内纸张单选按钮的值

Javascript 获取模板内纸张单选按钮的值

javascript polymer

Javascript 获取模板内纸张单选按钮的值,javascript,polymer,material-design,Javascript,Polymer,Material Design,我已经设置了一个模板，从JSON文件中的一些数据中提取标题，然后从这些标题创建一组纸质单选按钮。当我调用此模板（在纸张阴影中）时，当我单击“提交”（在纸张阴影中）时，无法捕获所选纸张单选按钮的值 以下是在纸张阴影中生成的内容： <polymer-element name="add-graphItem"> <template> <div id="div" layout horizontal> <paper-b

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


上载文件
变量
使改变
取消
提交
聚合物（“添加石墨”{
addNewGraph:函数（）{
log（this.$.headerValue.selectedItem）；
var hValue=此。$.headerValue.selectedItem；
console.log（hValue）；
},
cancelGraph:函数（）{
这是$.addGraph.toggle（）；
},
})

这是纸质单选按钮模板：

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


聚合物（“图形选项负载测试”{
headerListChanged:函数（旧值）{
console.log（this.headerList）；
//这是头；
}
});
我已经尝试了许多方法来获取所选纸质广播组的价值，但没有成功，任何帮助都将不胜感激

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

首先，您只能使用
$
散列来访问模板中使用
id
属性定义的节点。要访问其他节点，例如动态定义的或没有
id
属性的节点，可以使用
querySelector
方法。此方法还允许您按选择器进行搜索（有点像JQuery）。此外，要访问聚合物组件的阴影DOM中不具有
id
属性的节点，可以使用
shadowRoot
成员。这些想法在的聚合物文档中进行了讨论，更详细的内容请参见。（此外，
元素的结束标记缺少一个
/
）

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

  • this.$.idOfgraphOptionsLoadTest.$.idOfRadioGroup
    ，当您为元素定义了
    id
    属性时 
  • this.shadowRoot.querySelector（'graphhoptionsloadtest'）.shadowRoot.querySelector（'paper-radio-group'）
    ，无论是否定义了
    id
    属性；或
  • 当一个组件具有
    id
    s而另一个没有时，这两者的某种组合
我建议给
元素一个
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>


家
聚合物({
已创建：函数（）{
此参数为0；
这个。校长名单={
标题：[‘选项1’、‘选项2’、‘选项C’]
};
}
});
选项：
去
结果：
聚合物({
doIt：函数（事件、细节、发送者）{
var radioVal=此。$.optionsLoad。$.headerValue.selectedItem；
var msgTxt='Go clicked；'+radioVal.label+'selected'
console.log（msgTxt）；
此.$.results.innerText=msgTxt；
}
});
祝你好运

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

首先，您只能使用
$
散列来访问模板中使用
id
属性定义的节点。要访问其他节点，例如动态定义的或没有
id
属性的节点，可以使用
querySelector
方法。此方法还允许您按选择器进行搜索（有点像JQuery）。此外，要访问聚合物组件的阴影DOM中不具有
id
属性的节点，可以使用
shadowRoot
成员。这些想法在的聚合物文档中进行了讨论，更详细的内容请参见。（此外，
元素的结束标记缺少一个
/
）

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

  • this.$.idOfgraphOptionsLoadTest.$.idOfRadioGroup
    ，当您为元素定义了
    id
    属性时 
  • this.shadowRoot.querySelector（'graphhoptionsloadtest'）.shadowRoot.querySelector（'paper-radio-group'）
    ，无论是否定义了
    id
    属性；或
  • 当一个组件具有
    id
    s而另一个没有时，这两者的某种组合
我建议给
元素一个
id