如何通过 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

我曾经创建过一个国际化自定义绑定，它的工作方式如下：

将 data-bind 放在周围的元素上：

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

将所有 data-bound 元素的 children 替换为通用占位符，例如：</code>、<code> 等。存储元素你已经替换了。

Parent:
```
<div data-bind="i18n">
  The quick brown  jumps over the lazy dog.
</div>
```
Children:

<a href="https://en.wikipedia.org/wiki/Fox">fox</a>
使用您的翻译库替换 parent 中的字符串。类似于：
```
parentElement.innerText = translate(parentElement.innerText);
```

用缓存的元素替换你的占位符，return

来自（荷兰语示例）：

<div data-bind="i18n">
  De snelle bruine  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  jumps over the lazy dog.": 
     "De snelle bruine  springt over de luie hond.",
   "fox": 
     "vos"
 }
```

要创建可靠、无错误的实施，您需要做一些额外的工作...但它可能适合您。

举例说明：（请注意，这不是针对性能优化的，也不是没有错误或功能完整..（例如：替换 </code> 字符串不考虑重新排序））</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre><code>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 [=16=] jumps over the lazy dog.": "De snelle bruine [=16=] 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>

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

How can I add expressive translation to KnockoutJS via i18n?

knockout.js

magento2