聚合物元件-更智能的响应解决方案

有几种方法可以实现这一点。

计算类

在您的特定情况下,内容似乎保持不变,唯一的区别是水平/垂直类。幸运的是,您可以为此使用计算值!下面是一个示例:

<div large$="{%raw%}{{!isLarge}}{%endraw%}">
   <div class$="_computeThisClass(isLarge)">
      {{ content }}
   </div>
</div>

...

Polymer({
   ...
   _computeThisClass: function(isLarge) {
      if(isLarge) {
         return "layout horizontal";
      } else {
         return "layout vertical";
      }
   }
}

对我来说,最后一个的缺点是你(AFAIK)需要包含所有你需要在js中应用的类。

使用 hidden -属性

如果您只想隐藏元素,我建议使用 隐藏的 属性这可以采用布尔值或计算值,如上所述 here 。例如:

<div large$="{%raw%}{{!isLarge}}{%endraw%}" hidden$="{{!isLarge}}">
   <div class="layout vertical">
      {{ content }}
   </div>
</div>

缺点是内容确实会印在页面上(这本质上是应用一个条件 display: none; ).

使用条件模板

也可以使用 conditional template 。例如:

<template is="dom-if" if="{{!isLarge}}">
    <div large$="{%raw%}{{!isLarge}}{%endraw%}">
       <div class="layout vertical">
          {{ content }}
       </div>
    </div>
<template>

缺点是,内容会在稍后阶段(当条件满足时)印在页面上,这可能会导致延迟。但当情况不太可能改变时,情况就很好了!

在你的情况下,我认为简单地计算类是最好的。