Question

是否可以动态地将纸张复选框[checked | unchecked]的状态（属性）绑定到纸张输入元素内的[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>

行为应如下：当用户取消选中纸张复选框时，应禁用和/或只读同一行中的纸张输入元素，反之亦然。是否可以直接使用双胡子绑定多个元素，或者我必须以某种方式迭代DOM以手动设置纸张输入元素的属性？如果是，有人可以解释一下吗？

Answer 1

另一种绑定纸张复选框状态的方法。

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

jsbin demo http://jsbin.com/boxow/

Answer 2

我首选的方法是重构代码以创建负责一个项目的Polymer元素。这样，所有项目特定的行为都封装在一个地方。

一旦完成，有几种方法可以做到这一点。

最简单的方法是简单地为复选框创建一个on-tap事件，以切换属性的值并相应地设置disabled属性。

<paper-checkbox unchecked on-tap="{{checkChanged}}"></paper-checkbox>
//Other markup for item name display
<paper-input disabled floatingLabel id="contextRelevantName" style="width:120 px;"></paper-input>

将其置于其自身的聚合物元素中的一个好处是，您不必再担心独特的ID了。控件ID由shadowDOM进行模糊处理。

对于脚本，您可以这样做：

publish: {
  disabled: {
    value: true,
    reflect: false
  }
}

checkChanged: function() {
  this.$.disabled= !this.$.disabled;
  this.$.contextRelevantName.disabled = this.$.disabled;
}

我没有对此进行过测试，所以可能会对语法进行一些调整，有什么对你有所帮助，但这应该可以帮到你。

修改

根据以下评论中提供的示例代码，我修改了您的代码以使其正常运行。关键是要使1个元素包含任一行，而不是仅包含整个部分的多个元素。因此，下面的代码已经被删除了一点，只包括复选框和它应该禁用的输入。您可以轻松地为元素添加更多内容，以显示项目的其他部分。

<polymer-element name="aw-leistungsphase" layout vertical attributes="label checked defVal contractedVal"> <template> <div center horizontal layout> <div> <paper-checkbox checked on-tap="{{checkChanged}}" id="checkbox" label="{{label}}"></paper-checkbox> </div> <div class="container"><paper-input floatingLabel id="contractedInput" label="Enter Value" value="" style="width: 120px;"></paper-input></div> </div> </template> <script> Polymer('aw-leistungsphase', { publish: { /** * The label for this input. It normally appears as grey text inside * the text input and disappears once the user enters text. * * @attribute label * @type string * @default '' */ label: '', defVal : 0, contractedVal : 0 }, ready: function() { // Binding the project to the data-fields this.prj = au.app.prj; // i18n mappings this.i18ndefLPHLabel = au.xlate.xlate("hb.defLPHLabel"); this.i18ncontractedLPHLabel = au.xlate.xlate("hb.contractedLPHLabel"); }, observe : { 'contractedVal' : 'changedLPH' }, changedLPH: function(oldVal, newVal) { if (oldVal !== newVal) { //this.prj.hb.honlbl = newVal; console.log("Geänderter Wert: " + newVal); } }, checkChanged: function(e, detail, sender) { console.log(sender.label + " " + sender.checked); if (!this.$.checkbox.checked) { this.$.contractedInput.disabled = 'disabled'; } else { this.$.contractedInput.disabled = ''; } console.log("Input field disabled: " + this.$.contractedInput.disabled); } }); </script> </polymer-element>

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

2 个答案: