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

如果为 false，则隐藏 <div>。

现在，我想知道是否有更聪明的方法来解决这个问题而无需双重 <div>。

• 我能否以某种方式将条件放入 "class="？
• css 中的 @apply(--layout-horizontal) 会更好吗？

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

Answer 1

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

计算 class

在您的特定情况下，内容似乎保持不变，唯一的区别是 horizontal/vertical class。幸运的是，您可以为此使用计算值！这是一个示例：

<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 中应用的所有 classes。

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

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

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