Question

每次选择模板中的复选框时，我都想在聚合物元素中添加一个类或更改聚合物元素的属性。

由于我的元素使用label for属性，因此在实例化标记中的元素时绑定了复选框的ID

<label for="{{uniqueid}}" on-tap="{{toggle}}" />
  <input type="checkbox" id="{{uniqueid}}" class="select" checked="{{checker}}">
  <img src="{{image}}" alt="" class="prod-img">
  <div class="grid-details">
    <span>{{designer}}</span>
    <span>{{product}}</span>
    <span>{{currency}} {{price}}</span>
    <span>Shipped from {{info}}</span>
  </div>
</label>

然后我会像这样调用元素

<gmselect-element uniqueid="four" image="http://i.imgur.com/fkq1QKq.jpg" designer="CUCARELIQUIA" product="Castellano Suede Bag Redder" info="Gijon, Spain" price="650" currency="$"></gmselect-element>

我的切换功能如下所示

toggle: function() {
    this.$.grid.setAttribute("class", "grid true");
    this.setAttribute("selected", "true");
  }

但是，我不想在此处将其设置为true，而是要检查复选框的已检查属性的值。由于ID不是静态的，我无法使用$功能获取元素。我也不知道如何逃避胡子中绑定的数据以在方法中获取其值。

Answer 1

this.$.grid.classList.add('classname')

this.$.grid.classList.remove('classname')

Answer 2

您已将checked值绑定到{{checker}}，因此您应该可以在this.checker函数中引用toggle。

如果需要，您还可以从活动中获取模型数据。参见：

https://www.polymer-project.org/1.0/docs/devguide/data-binding

在聚合物元素中添加一个类

2 个答案: