在我的项目中，我需要支持阿拉伯语和英语，为此，请执行以下操作：
<div class="{{ {'align-right': currentLanguageCode == 'ar'} | tokenList }}">{{languages[currentLanguageCode].supervisorName}}</div>
上面的行将在每个文本渲染中重复。
因此，我认为如果可以执行以下操作会更好：
bilingual-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>
有什么办法可以实现这样的东西吗？
但是，一种聚合的方法是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');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句