Question

我创建了这个组件来演示我的问题。正如预期的那样，这个组件在chrome和firefox中工作。但是如果我写<ul class="clearing-thumbs small-block-grid-4" data-clearing> <% @galleries.each do |f| %>  <%= link_to link_to f.image.url , image_tag(f.image.url(:medium)) %></li> <div class="box_bot"> <% if current_user && current_user.admin? %> <%= link_to "Delete", f,class: "btn", method: :delete, data: { confirm: "Are you sure you want to delete this?" } %> <% end %>  </div> <% end %> </ul>而不是this.$.wrapper.setAttribute('class','blue');，它就会停止在firefox中工作。

这是在事件处理程序中更改阴影dom元素上的类的首选方法，还是我做了一些意外正确的事情，这可能是打破未来的版本？

另外，为什么我必须手动为firefox指定this.$.wrapper.setAttribute('class','blue style-scope poly-test');和我的元素名称？

style-scope

Answer 1

网络组件的想法是尽可能将网络设为声明性。本着这种精神，实现动态类的Polymer-way应该是

陈述性方法：（https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding）

...
<dom-module id="poly-test">
  ...
  <template>
    <!-- handle dynamic classes declaratively -->
    <div class$="{{computeClass(isBlue)}}">
      <content></content>
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'poly-test',
    properties: {
      'isBlue': { type: Boolean, value: false }
    },
    listeners: { 'click': 'clickHandler' },
    clickHandler: function () {
      this.isBlue = !this.isBlue;
    },
    computeClass: function (f) {
      return f ? "blue" : "red";
    }
  });
</script>

在升级元素和将节点标记为DOM时（在我认为的阴暗行为下），框架使用

style-scope，我认为我们不打算触摸它。

如果您真的希望处理强制性，我建议您使用Polymer API的toggleClass()方法。

势在必行的方法：（http://polymer.github.io/polymer/）

...
<dom-module id="poly-test">
  ...
  <template>
    <div id="wrapper" class="red"><content></content></div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'poly-test',
    properties: {
      'isBlue': { type: Boolean, value: false }
    },
    listeners: { 'click': 'clickHandler' },
    clickHandler: function () {
      this.isBlue = !this.isBlue;
      this.toggleClass("blue", this.isBlue, this.$.wrapper);
      this.toggleClass("red", !this.isBlue, this.$.wrapper);
    }
  });
</script>

Answer 2

使用classList属性管理类：

<link rel="import" href="../js/bower_components/polymer/polymer.html">
<dom-module id="poly-test">
  <style>
    .blue { border: 10px solid blue; }
    .red  { border: 10px solid red; }
    #wrapper { font-weight: bold; font-size: 42px; }
  </style>
  <template>
    <div id="wrapper" class="red"><content></content></div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'poly-test',
    properties: {'blue': { type: 'Boolean', value: false }},
    listeners: { 'click': 'clickHandler' },
    clickHandler: function () {
      this.blue = !this.blue;
      this.$.wrapper.classList.toggle('blue', this.blue);
      this.$.wrapper.classList.toggle('red', !this.blue)
    }
  });
</script>

有关classList的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

聚合物1.0元素的动态类

2 个答案: