DoK*_*DoK 3 data-binding web-component polymer
是否可以动态地将纸张复选框[已检查|未检查]的状态(属性)绑定到纸张输入元素内的[readonly | disabled]属性?这是我到目前为止的实现:
<template repeat="{{item in lphasen}}">
<div center horizontal layout>
<paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
<div style="margin-left: 24px;" flex>
<h4>{{item.name}}</h4>
</div>
<div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
行为应如下所示:当用户取消选中纸张复选框时,同一行中的纸张输入元素应禁用和/或只读,反之亦然.是否可以直接使用双胡子绑定多个元素,或者我必须以某种方式迭代DOM以手动设置纸张输入元素的属性?如果是,有人可以解释一下吗?
小智 6
另一种绑定纸张复选框状态的方法.
<polymer-element name="check-input">
<template>
<style>
#checkbox {
margin-left: 1em;
}
</style>
<div center horizontal layout>
<div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
<div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
</div>
</template>
<script>
Polymer('check-input', {
publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
<div>
<check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
<check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
</div>
Run Code Online (Sandbox Code Playgroud)
jsbin demo http://jsbin.com/boxow/
| 归档时间: |
|
| 查看次数: |
5704 次 |
| 最近记录: |