基于属性的聚合物RTL文本

Question

在我的项目中，我需要支持阿拉伯语和英语，为此，我会执行以下操作：

<div class="{{ {'align-right': currentLanguageCode == 'ar'} | tokenList }}">{{languages[currentLanguageCode].supervisorName}}</div>

每次文字渲染都会重复上述行。

所以我认为如果能做到这样的话会更好：

双语-text.html

<polymer-element name="bilingual-text" attributes="languageCode">
    <template>
       <content></content>
    </template>
    <script>
        Polymer({
            languageCodeChanged: function() {
                if (this.languageCode == 'ar') {
                    // add .align-right class.
                } else {
                    // remove .align-right class.
                }               
            }
        })
    </script>
</polymer-element>

，然后

<bilingual-text languageCode="ar">{{languages['ar'].supervisorName}}</bilingual-text>

有没有办法实现类似的东西？

Answer 1

聚合方式

但是，采用聚合方法的方法是在发布reflect: true属性时使用languageCode。这样，您可以根据此attr和/或它的值来设置此元素的样式：

:host([languageCode="ar"]) {
  direction: rtl;
}

这是一个有效的演示：

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="bilingual-text" attributes="languageCode">
    <template>
       <style>
         :host {
           display: block;
         }
         :host([languageCode="ar"]) {
           direction: rtl;
         }
       </style>
       <content></content>
    </template>
    <script>
        Polymer({
            publish: {
              languageCode: {value: null, reflect: true}
            }
        });
    </script>
</polymer-element>


<bilingual-text>I'm LTR</bilingual-text>
<bilingual-text languageCode="ar">I'm RTL</bilingual-text>

传统方式

定义languageCodeChanged()并致电：

this.classList.toggle('align-right', this.languageCode == 'ar');