Polymer Elements - 更智能的响应式解决方案

Question

我目前正在使用Polymer 1.0中的以下代码来使我的网页的一部分响应（它有效）：

<template is="dom-bind">
   <iron-media-query query="(max-width: 750px)" query-matches="{%raw%}{{isLarge}}{%endraw%}"></iron-media-query>
   <!-- set an attribute if isLarge is true -->
     <div large$="{%raw%}{{!isLarge}}{%endraw%}">
       <div class="layout vertical">
       {{ content }}
       </div>
     </div>
     <div large$="{%raw%}{{isLarge}}{%endraw%}">
       <div class="layout horizontal">
       {{ content }}
       </div>
     </div>
</template>

在我的CSS中我有

[wide] {
      display: none;
    }

隐藏<div> if false。

现在，我想知道在没有双<div>的情况下是否有更聪明的方法来解决这个问题。

• 我能以某种方式将条件置于“class =”中吗？
• css中的@apply(--layout-horizontal)会更好吗？

注意 我注意到在Polymer 0.5 <div layout vertical>中有效，但在Polymer 1.0中没有。相反，只有<div class="layout vertical">似乎适用于Polymer 1.0。

Answer 1

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

计算班级

在您的特定情况下，内容似乎保持不变，唯一的区别是水平/垂直类。幸运的是，你可以使用计算值！这是一个示例：

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

如果您只想隐藏元素，我建议您使用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>

缺点是内容会在稍后阶段（满足条件时）在页面上标记，这可能会导致延迟。但是当条件不太可能改变时很好！

在你的情况下，我认为只是计算课程是最好的。