Polymer 1.0：有没有办法使用“布局”作为属性而不是 CSS 类或在类属性中使用属性序列化？答案

【问题标题】：Polymer 1.0: Is there any way to use 'layout' as an attribute instead of as a CSS class or using Attribute serialization in the class attribute?Polymer 1.0：有没有办法使用“布局”作为属性而不是 CSS 类或在类属性中使用属性序列化？
【发布时间】：2015-06-05 10:25:58
【问题描述】：

我已经在聚合物 0.5 中构建了我的应用程序。

现在我已将其更新为聚合物 1.0。

对于响应式布局，我使用了 Polymer 0.5 中布局属性的自定义逻辑的布局属性。

请看下面的代码：

<template is="auto-binding">
<core-media-query query="max-width: 767px" queryMatches="{{smallScreen}}"></core-media-query>
<section layout vertical?="{{smallScreen}}" horizontal?="{{!smallScreen}}">
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="First name" floatingLabel>
            <input type="text" is="paper-input" id="fname" name="fname">
        </paper-input-decorator>
    </section>
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="Last name" floatingLabel>
            <input type="text" is="paper-input" id="lname" name="lname">
        </paper-input-decorator>
    </section>
</section>
</template>

现在在聚合物 1.0 中引入了一个元素“iron-layout-flex”，所有迹象都表明，现在我们必须使用“.layout”、“.horizontal”、“.vertical”类而不是属性？我应该如何根据布局属性的逻辑进行调整，这非常令人困惑。

所以，我的问题是，有没有办法将“布局”用作属性而不是 CSS 类或在类属性中使用属性序列化？

【问题讨论】：

标签： javascript html polymer web-component polymer-1.0

【解决方案1】：

好吧，理论上您可以将属性转换为新的布局 css 属性。像这样的东西（未经测试，所以不能保证这会真正起作用）

<style is="custom-style">
  html /deep/ [layout][vertical] {
    @apply(--layout-vertical);
  }

  html /deep/ [layout][horizontal] {
    @apply(--layout-horizontal);
  }

  html /deep/ [flex][four] {
    @apply(--layout-flex-4);
  }

  html /deep/ [flex][auto] {
    @apply(--layout-flex-auto);
  }
</style>

【讨论】：

这就是答案。但是，它需要更多的工作来构建自定义 CSS。我已经想到了，但是如果在聚合物的下一次更新中布局类有任何更新，那么我将不得不手动添加到我的自定义 CSS 文件中。这不是使用聚合物的正确方法。
我认为，可能有另一种方法不会强迫我制作新的自定义 CSS，只有从 HTML 逻辑我才能处理这种情况。
您找到解决此问题的方法了吗？我的意思是，处理聚合物布局的最佳方法是什么？如果是这样，请评论这篇文章。提前致谢

【解决方案2】：

从 Polymer 1.2 开始，现在可以使用 compound binding 请参阅 Polymer Blog。

意思是，您现在应该能够执行以下操作：

<div class="someOtherClass [[addClassIf('horizontal', smallScreen)]] [[addClassIf('vertical', !smallScreen)]]" >
</div>

..
smallScreen: {
   type: Boolean,
   value: false,
}
..

addClassIf: function(classToAdd, shouldAdd)
{
   if(shouldAdd)
      return classToAdd;
}

现在compound binding 有效，可能还有其他（更好的）方法可以做到这一点。但这表明了如何做到这一点的概念。

【讨论】：