0

我目前在 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。

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

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

4

1 回答 1

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属性。这可以采用布尔值或计算值，如此处所述。一个例子：

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

缺点是内容确实被标记在页面上（这本质上是应用条件display: none;）。

使用条件模板

也可以选择使用条件模板。一个例子：

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

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

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

于 2016-01-06T20:37:11.120 回答