Question

我对Polymer有点毛茸茸的本地化问题。

假设我想生成在消息中包含链接的本地化消息。一个原始的例子是以下

<span>Join the <a href="http://some.url">Community</a>.</span>

所以在这里，用户看到的完整示例将是“加入社区”。与“社区”作为一个很好的链接。在非英语语言环境中，“社区”可以显示在消息的其他位置，在某些语言环境中甚至可能没有句号。

使用通用元素执行此操作的最有效方法是什么？

我的想法是绑定一些来自某个DOM节点中的本地化过程的文本+ html，例如：

<span>{{myLocalizedPromoWithLink}}</span>
...
myLocalizedPromoWithLink: 'Join the <a href="http://some.url">Community</a>.',
....

然而，数据绑定会自动清理字符串，这通常是正确的做法。我可以以某种方式覆盖这个吗？

另一种方法是使用原生字符串直接创建具有本地化文本和html的DOM节点并将其注入，但这听起来像是一个很好的攻击向量。

还有其他不涉及Closure的替代方案吗？我宁愿避免做本地化的字符串分为预链接和后链接部分，因为这真的很麻烦。

提前致谢！

Answer 1

这似乎有效：

   <dom-module id="my-element">

        <template>
            bla bla <span id="joinSpan">Join the __LINK__ Community __LINK__ something after</span> bla bla
        </template>

        <script>
            Polymer({
                is: "my-element",


                ready: function(){
                    console.log('my-element ready');
                    var spanContent = Polymer.dom(this.$.joinSpan).firstChild;
                    var parts = spanContent.textContent.split('__LINK__');

                    var link = document.createElement('a');

                    link.href='http://google.com/';
                    link.textContent = parts[1];

                    Polymer.dom(this.$.joinSpan).removeChild(spanContent);
                    Polymer.dom(this.$.joinSpan).appendChild(document.createTextNode(parts[0]));
                    Polymer.dom(this.$.joinSpan).appendChild(link);
                    Polymer.dom(this.$.joinSpan).appendChild(document.createTextNode(parts[2]));

                }

            });
        </script>

    </dom-module>

这是错误的：

如果把一些特殊的TOKEN而不是链接到本地化的文本然后用链接替换它，可能带有计算属性怎么办？在本地化属性或其他任何文件：

喜欢'加入 LINK__BEGIN 社区 LINK_END 。'

然后在组件中：

myLocalizedPromoWithLink: {
  type: String,
  computed: 'computeMyLocalizedPromoWithLink(myLocalizedPromoWithLinkRaw)'
} 

computeMyLocalizedPromoWithLink: function(myLocalizedPromoWithLinkRaw){
   var r = myLocalizedPromoWithLinkRaw.replace('__LINK__BEGIN__', '<a href="http://some.url">');
   r = r.repalce(replace('__LINK__END__', '</a>));

   return r
}

将本地化文本与嵌入在Polymer中的部分文本中的链接绑定

1 个答案: