Mal*_*ric 5 forms polymer paper-elements
我正在使用Polymer Project中的Paper Elements来构建表单,并且使用paper-radio-group标签及其子项遇到了问题paper-radio-button.使用正常的单选按钮列表,我会执行以下操作:
<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />
请注意,name属性是相同的,将单选按钮分组并为myFieldName字段生成单个值.但是以paper-radio-group相同的方式使用元素不起作用:
<paper-radio-group label="My Field">
<paper-radio-button name="myFieldName" label="First"></paper-radio-button>
<paper-radio-button name="myFieldName" label="Second"></paper-radio-button>
<paper-radio-button name="myFieldName" label="Third"></paper-radio-button>
</paper-radio-group>
这会产生三个单选按钮,但选择一个不会取消选择其他按钮.如果我给每个人一个唯一的名称,那么它从UI的角度来看,但不同于标准的单选按钮行为.
除此之外,我在哪里指定每个单选按钮的值？有一个标签属性,但没有任何价值.我是否必须将隐藏的字段连接到change事件paper-radio-button或core-select事件上paper-radio-group？这似乎都不是一个特别优雅的解决方案.
这个问题很古老,可能当时属性不存在,但至少现在我们可以拥有属于a 的相同name属性,如果我们选择不同的例如paper-radio-buttonspaper-radio-groupattr-for-selectedpaper-radio-groupvalue
<paper-radio-group attr-for-selected="value">
<paper-radio-button value="one" name="same_name">Label for one</paper-radio-button>
<paper-radio-button value="two" name="same_name">Label for two</paper-radio-button>
</paper-radio-group>
留下我的答案,因为这是我在谷歌搜索时得到的打击,可能对其他人有价值.
如果你想使用纸张元素作为表单输入字段的替代品而不编写任何JavaScript,那么我认为你不能,因为它们只不过是样式的div.
纸质单选按钮的名称属性是其值.当前选择的按钮使用paper-radio-group的selected属性指定,并且可以绑定到element属性.然后,您可以使用属性观察程序或在需要时访问此值.如果你给paper-radio-group一个id,比如说radio,你也可以直接获得所选的项目.this.$.radio.selected
这是一个小例子:
<!DOCTYPE html>
<html>
<head>
<script src='http://www.polymer-project.org/components/platform/platform.js'></script>
<link rel='import' href='http://www.polymer-project.org/components/paper-radio-group/paper-radio-group.html'>
</head>
<body unresolved>
<polymer-element name="my-app">
<template>
<paper-radio-group selected="{{selection}}">
<paper-radio-button name="small" label="Small"></paper-radio-button>
<paper-radio-button name="medium" label="Medium"></paper-radio-button>
<paper-radio-button name="large" label="Large"></paper-radio-button>
</paper-radio-group>
</template>
<script>
Polymer('my-app', {
created: function () {
this.selection = "medium"
},
selectionChanged: function () {
console.log(this.selection);
}
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>