Knockoutjs - 我可以将 data-bind attr 与 i18n 一起使用吗？

Question

我正在修改 magento2 中的模板，其中包含这段代码：

<a href="#"
   class="item-action action-gift"
   data-bind="
   attr: {title: 'Gift Options'}
   ">
    <span data-bind="i18n: 'Gift options'"></span>
</a>

我希望能够像这样翻译标题属性

<a href="#"
   class="item-action action-gift"
   data-bind="
   attr: {title: i18n:'Gift Options'}
   ">
    <span data-bind="i18n: 'Gift options'"></span>
</a>

但这显然会出错。是否可以在 attr 绑定中使用 i18n？如果是，如何正确处理？

Answer 1

您可以使用 ko.applyBindingsToNode 创建一个调用默认绑定的自定义绑定处理程序。

为了注入您的 i18n 翻译步骤，您在 init 方法中创建一个 ko.pureComputed 表示您的设置对象，并调用原始的 attr 绑定。

假设我们有一个名为 i18n 的函数，它接受一个字符串和 returns 另一个字符串。我们将从：

attr: { title: "my string" }

到

attr: { title: i18n("my string") }

以下是我们如何创建传递给 attr 的计算对象：

ko.bindingHandlers.i18nAttr = {
  init: function(el, va) {
    var translated = ko.pureComputed(function() {
      // Support observable options objects: unwrap
      var options = ko.unwrap(va());

      return Object
        .keys(options)
        .reduce(function(tOptions, k) {
          // Support observable properties: unwrap
          tOptions[k] = i18n(ko.unwrap(options[k]));
          return tOptions;
        }, {});
    });

    return ko.applyBindingsToNode(el, { attr: translated });
  }
};

在一个工作示例中：（我创建了一个 computed i18n 函数来支持打开和关闭 translations/switching 语言）

ko.bindingHandlers.i18nAttr = {
  init: function(el, va) {
    var translated = ko.pureComputed(function() {
      var options = ko.unwrap(va());
      var translate = i18n();

      return Object
        .keys(options)
        .reduce(function(tOptions, k) {
          tOptions[k] = translate(ko.unwrap(options[k]));
          return tOptions;
        }, {});
    });

    return ko.applyBindingsToNode(el, { attr: translated });
  }
};

var translate = ko.observable(true);
var i18n = translater(translate);

var vm = {
  title: "Elevator",
  placeholder: "Cookie",
  translate: translate
};

ko.applyBindings(vm);


// Mock i18n method
function translater(doTranslate) {
  return ko.pureComputed(function() {
    return doTranslate() 
      ? function(str) { return str; }
      : function(str) {
          return ({
            "Elevator": "Lift",
            "Cookie": "Biscuit"
          })[str];
        };
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input data-bind="i18nAttr: { placeholder: placeholder }"/>
<a data-bind="i18nAttr: { title: title }">hover for title</a>

<label><input type="checkbox" data-bind="checked: translate">Translate</label>

Answer 2

这个短得多的代码可能适合您：

<a href="#"
           class="item-action action-gift"
           data-bind="
           attr: {title: '${i18n("Gift Options")}'}
           ">
           <span data-bind="i18n: 'Gift options'"></span>
</a>

Answer 3

如果您指的是 UI 组件模板（*.html 文件）- 您可以使用 $t("ENTER_YOUR_STRING_HERE") 菊花链 KnockoutJS 的文本绑定功能并实现 internationalization/translation:

如果您指的是 Magento 模板（*.phtml 文件）- 您可以使用 __("ENTER_YOUR_STRING_HERE")方法实现internationalization/translation:

来源： https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/translations/translate_theory.html

Knockoutjs - 我可以将 data-bind attr 与 i18n 一起使用吗？

Knockoutjs - Can I use data-bind attr together with i18n?

knockout.js

magento2