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

gev0vcfq  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(154)

我在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?如果有,如何正确地做到这一点?

qgelzfjb

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

xoefb8l8

xoefb8l82#

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

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

yqkkidmi3#

  • 如果您要引用UI组件模板(*.html文件)-您可以使用$t(“ENTER_YOUR_STRING_HERE”)函数以菊花链形式连接KnockoutJS的文本绑定,并实现国际化/翻译:

  • 如果您指的是Magento模板(*.phtml文件)-您可以使用__(“ENTER_YOUR_STRING_HERE”)方法来实现国际化/翻译:

相关问题