Polymer 使用<;铁选择器>;在聚合物2.x中
我正在尝试演示Polymer 使用<;铁选择器>;在聚合物2.x中,polymer,polymer-2.x,iron-elements,Polymer,Polymer 2.x,Iron Elements,我正在尝试演示。在演示中,我想在用户从列表中选择新值时登录到控制台。我做错了什么 JS-Bin 项目1 项目2 项目3 MyEl类。元素{ 静态get是(){return'my el'} 静态获取属性(){return{ 路线:{ 类型:数字, 通知:正确, 观察家:"路线改变",, }, }} 构造函数(){ 超级(); } _路线更改(路线){ 控制台日志('路由',路由); } } 定义(MyEl.is,MyEl); 要更改路由的值,必须使用双向绑定。由于铁选择器无法更改路线的值,因此
。在演示中,我想在用户从列表中选择新值时登录到控制台。我做错了什么
JS-Bin
项目1
项目2
项目3
MyEl类。元素{
静态get是(){return'my el'}
静态获取属性(){return{
路线:{
类型:数字,
通知:正确,
观察家:"路线改变",,
},
}}
构造函数(){
超级();
}
_路线更改(路线){
控制台日志('路由',路由);
}
}
定义(MyEl.is,MyEl);
要更改路由的值,必须使用双向绑定。由于铁选择器
无法更改路线
的值,因此不会触发观察者
JS-Bin
.iron选定{颜色:蓝色}
在iron选择器中使用双向绑定的路由值:[[Route]]
项目1
项目2
项目3
在iron选择器中使用单向绑定的路由值:[[Route]]
项目1
项目2
项目3
[铁选择器正在工作,但无法更新路由的值]
MyEl类。元素{
静态get是(){
返回“我的el”
}
静态获取属性(){
返回{
路线:{
类型:数字,
通知:正确,
观察家:"路线改变",,
},
}
}
构造函数(){
超级();
}
_路线更改(路线){
控制台日志('路由',路由);
}
}
定义(MyEl.is,MyEl);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="iron-selector/iron-selector.html">
</head>
<body>
<dom-module id="my-el">
<template>
<iron-selector selected="[[route]]">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</iron-selector>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() { return 'my-el' }
static get properties() { return {
route: {
type: Number,
notify: true,
observer: '_routeChanged',
},
}}
constructor() {
super();
}
_routeChanged(route) {
console.log('route', route);
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>