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>.',
....

{{myLocalizedPromoWithLink}
...
myLocalizedPromoWithLink:“加入。”，
....

但是，数据绑定会自动清理字符串，这通常是正确的做法。我能以某种方式推翻这个吗

另一种方法是用DOST节点创建带有本地化字符串和HTML的DOM节点，并注入它，但听起来像是一个很好的攻击向量。 是否有其他不涉及关闭的替代方案？我宁愿避免将本地化字符串分为链接前和链接后两部分，因为这样做非常混乱

---

提前谢谢

这似乎奏效了：

   <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>

布拉布拉加入uu链接uu社区uu链接uu后的东西布拉布拉
聚合物({
是：“我的元素”，
就绪：函数（）{
log（'my-element ready'）；
var spanContent=Polymer.dom（this.$.joinSpan）.firstChild；
var parts=spanContent.textContent.split（“链接”）；
var link=document.createElement（'a'）；
link.href=http://google.com/';
link.textContent=零件[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]）；
}
});

这是错误的：

如果在本地化文本中放置一些特殊标记而不是链接，然后用链接（可能是计算属性）替换它，会怎么样？ 在本地化属性或其他文件中：

比如“加入链接\u开始社区链接\u结束”

然后在组件中：

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
}

myLocalizedPromoWithLink:{
类型：字符串，
计算：'computeMyLocalizedPromoWithLink（myLocalizedPromoWithLinkRaw）'
} 
computeMyLocalizedPromoWithLink:函数（myLocalizedPromoWithLinkRaw）{
var r=myLocalizedPromoWithLinkRaw.replace（“链接开始”）；
返回r
}

这似乎在起作用：

   <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>

布拉布拉加入uu链接uu社区uu链接uu后的东西布拉布拉
聚合物({
是：“我的元素”，
就绪：函数（）{
log（'my-element ready'）；
var spanContent=Polymer.dom（this.$.joinSpan）.firstChild；
var parts=spanContent.textContent.split（“链接”）；
var link=document.createElement（'a'）；
link.href=http://google.com/';
link.textContent=零件[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]）；
}
});

这是错误的：

如果在本地化文本中放置一些特殊标记而不是链接，然后用链接（可能是计算属性）替换它，会怎么样？ 在本地化属性或其他文件中：

比如“加入链接\u开始社区链接\u结束”

然后在组件中：

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
}

myLocalizedPromoWithLink:{
类型：字符串，
计算：'computeMyLocalizedPromoWithLink（myLocalizedPromoWithLinkRaw）'
} 
computeMyLocalizedPromoWithLink:函数（myLocalizedPromoWithLinkRaw）{
var r=myLocalizedPromoWithLinkRaw.replace（“链接开始”）；
返回r
}

您能解释一下“数据绑定自动清理字符串”是什么意思吗？我不太明白为什么你不能像你的例子那样做你能解释一下“数据绑定自动清理字符串”是什么意思吗？我不太明白为什么你不能像你的例子那样做我不确定这是怎么解决问题的？我很确定问题在于绑定逻辑在将字符串注入DOM之前对其进行了清理。因此，即使是一个计算字符串也会被清理。是的，您是对的，computed属性也会被清理，所以我建议稍微修改一下dom。见更新的答案我不确定这是如何解决问题的？我很确定问题在于绑定逻辑在将字符串注入DOM之前对其进行了清理。因此，即使是一个计算字符串也会被清理。是的，您是对的，computed属性也会被清理，所以我建议稍微修改一下dom。请参阅更新的答案