基于属性的聚合物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');