Javascript 聚合物1.0：有没有办法使用'；布局'；作为属性而不是CSS类，或者在类属性中使用属性序列化？

我已经在polymer 0.5中构建了我的应用程序

现在我已经将其更新为polymer 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>

现在在polymer 1.0中引入了一个元素“iron layout flex”，所有的指示都是，现在我们必须使用类“.layout”、“.horizontal”、“.vertical”来代替属性？如何根据布局属性的逻辑进行调整是非常令人困惑的

---

因此，我的问题是，有没有办法将“layout”用作属性，而不是CSS类或在class属性中使用属性序列化？

理论上，您可以将属性转换为新的布局CSS属性。类似于这样的情况（未经测试，因此不能保证这会真正起作用）

html/deep/[layout][vertical]{
@应用（--垂直布局）；
}
html/deep/[layout][水平]{
@应用（--水平布局）；
}
html/deep/[flex][4]{
@应用（--layout-flex-4）；
}
html/deep/[flex][auto]{
@应用（--layout flex auto）；
}

从聚合物1.2开始，现在可以使用

化合物结合

参见

也就是说，您现在应该能够执行以下操作：

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

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

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

..
小屏幕：{
类型：布尔型，
值：false，
}
..
addClassIf：函数（classToAdd，shouldAdd）
{
如果（应添加）
返回类toadd；
}

---

既然

复合绑定

起作用了，可能还有其他更好的方法来实现这一点。但这表明了如何实现这一目标的概念。

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

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

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

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