knockout.js Knockoutjs -我可以将数据绑定属性与i18 n一起使用吗？

gev0vcfq 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(152)

我在magento2中修改了一个模板，它包含以下代码块：

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

我希望能够这样翻译title属性

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

但这显然会产生错误。有没有可能在attr绑定中有i18n？如果有，如何正确地做到这一点？

knockout.js

来源：https://stackoverflow.com/questions/44403082/knockoutjs-can-i-use-data-bind-attr-together-with-i18n

3条答案

按热度按时间

qgelzfjb1#

您可以使用ko.applyBindingsToNode建立呼叫预设系结的自订系结行程常式。
要注入i18n转换步骤，您需要在init方法中创建settings对象的ko.pureComputed表示，并使用它调用原始的attr绑定。
假设我们有一个名为i18n的函数，它接受一个字符串并返回另一个字符串，我们将从：

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 i18 n函数来支持打开和关闭翻译/切换语言）
第一个

赞(0）回复(0）举报 2022-11-10

xoefb8l82#

以下更短的代码可以满足您的需求：

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

赞(0）回复(0）举报 2022-11-10

yqkkidmi3#