Question

在我的KnockoutJS文件中，我有：

<span>
By clicking submit order you agree to our <a href="/policies/terms-and-conditions/" target="_blank">Terms and Conditions</a>
and to receive promotional emails from the Site You can
subsequently opt out of receiving such
promotional e-mails by clicking on the link at the bottom of any promotional email</span>

我想要做的是翻译这个块：

<span data-bind="i18n: 'By clicking submit order you agree to our <a href="/policies/terms-and-conditions/" target="_blank">Terms and Conditions</a> and to receive promotional emails from the Site You can subsequently opt out of receiving such promotional e-mails by clicking on the link at the bottom of any promotional email'"></span>

我试过这样做：

Sub splitHyperLinks()
    Dim sel As Range
    Set sel = Selection

    Dim arr() As String
    Dim cell As Range
    Dim i As Long

    'Loop through each cell highlighted
    For Each cell In sel
        arr = Split(cell, ",")

        'Loop through each link in cell
        For i = 0 To UBound(arr)
            'Create hyperlink
            cell.Offset(0, i + 1).Parent.Hyperlinks.Add Anchor:=cell.Offset(0, i + 1), Address:="C:/files/Photos/" & arr(i) & ".jpg", SubAddress:="", TextToDisplay:="Link"
        Next i
    Next cell
End Sub

但它不起作用 - 我希望能够在绑定中添加href和其他可能的信息。

Answer 1

我曾经创建了一个国际化自定义绑定，其工作原理如下：

将数据绑定放在周围的元素上：

<div data-bind="i18n">
  The quick brown <a href="https://en.wikipedia.org/wiki/Fox">fox</a> jumps over the lazy dog.
</div>

将所有数据绑定元素的子元素替换为通用占位符，例如：$1，$2等。存储您已替换的元素

家长：
```
<div data-bind="i18n">
  The quick brown $1 jumps over the lazy dog.
</div>
```
<强>儿童：

<a href="https://en.wikipedia.org/wiki/Fox">fox</a>

使用翻译库替换父级中的字符串。类似的东西：

parentElement.innerText = translate(parentElement.innerText);

用缓存的元素替换占位符，然后返回

来自（荷兰语的例子）：

<div data-bind="i18n">
  De snelle bruine $1 springt over de luie hond.
</div>

要：

<div data-bind="i18n">
  De snelle bruine <a href="https://en.wikipedia.org/wiki/Fox">fox</a> springt over de luie hond.
</div>

现在，如果您还要翻译 fox （当然，您也可以），那么您也会在其中添加i18n绑定。您的翻译词典必须包含：

 var dutch = {
   "The quick brown $1 jumps over the lazy dog.": 
     "De snelle bruine $1 springt over de luie hond.",
   "fox": 
     "vos"
 }

要创建一个可靠的，无错误的实现，您需要做一些额外的工作......但它可能会为您解决。

一个例子来说明:(请注意，这不是针对性能进行优化而不是无错误或功能完整..（例如：替换$1字符串并不尊重重新排序））

＆＃13;

ko.bindingHandlers.i18n = {
  init: function(element) {
    var ogChildren = Array.from(element.children)
      .map(function replaceAndReturn(c, i) {
        return element.replaceChild(PlaceHolder(i), c);
      });

    var translation = translate(element.innerText);
    if (!translation) return;
    
    ogChildren.forEach(function(_, i) {
      translation = translation.replace("$" + i, HTMLPlaceHolder(i).outerHTML);
    });

    element.innerHTML = translation; // Parses the span strings to elements

    Array.from(element.querySelectorAll("span[data-tindex]"))
      .forEach(function(c, i) {
        element.replaceChild(ogChildren[i], c); // Puts back in og children
      });
  }
}

ko.applyBindings({});

function PlaceHolder(i) {
  return document.createTextNode("$" + i);
}

function HTMLPlaceHolder(tIndex) {
  var span = document.createElement("span");
  span.setAttribute("data-tindex", tIndex);
  return span;
}

function translate(key) {
  var dutch = {
    "The quick brown $0 jumps over the lazy dog.": 
      "De snelle bruine $0 springt over de luie hond.",
    "fox":
      "vos"
  };

  return dutch[key];
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="i18n">
  The quick brown <a href="https://en.wikipedia.org/wiki/Fox">fox</a> jumps over the lazy dog.
</div>

<div data-bind="i18n">
  The quick brown <a href="https://en.wikipedia.org/wiki/Fox" data-bind="i18n">fox</a> jumps over the lazy dog.
</div>

＆＃13;

如何通过i18n为KnockoutJS添加富有表现力的翻译？

1 个答案: