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

Question

在我的 KnockoutJS 文件中，我有：

<a href="/policies/shipping-policy" target="_blank" data-bind="i18n: 'Shipping Policy'"></a>

我想做的是翻译这个块：

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

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

Answer 1

我曾经创建了一个像这样工作的国际化自定义绑定：

1. 对周围元素进行数据绑定：

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

2. 用通用占位符替换所有数据绑定元素的子元素，例如：$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>

3. 使用您的翻译库替换父级中的字符串。比如：

   parentElement.innerText = translate(parentElement.innerText);
   

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

   来自（荷兰语示例）：

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

5. 现在，如果您还想翻译 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 字符串不考虑重新排序））

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];
};

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