纸元素之间的状态数据绑定

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/