1

我遇到了一个问题，即 l20n 仅适用于标准 HTML 元素的默认属性。

就我而言，我正在尝试使用 JSON 格式的翻译。我的虚拟数据如下：

{
  "test": {
    "attrs": {
      "title": "my_title_value",
      "custom": "my_custom_value",
      "placeholder": "my_placeholder_value"
    }
  }
}

我的测试HMTL如下：

<input type="text" data-l10n-id="test" title="" custom="" placeholder="" />

但是，浏览器会生成以下 HTML：

<input type="text" data-l10n-id="test" title="my_title_value" custom="" placeholder="my_placeholder_value">

我已经尝试了属性排序和属性名称的各种组合，看起来只有每个元素类型的适当默认 HTML 属性由 l20n 本地化。

当在自定义元素中使用标准 HTML 属性（例如“title”）时，该问题也很明显，尽管 l20n 可以处理标准元素的标准属性（当它们被放置在<content>自定义元素的标记中时）。

围绕其处理属性的 l20n 文档似乎并不十分广泛。到目前为止，在 Stack Overflow 和 Google 上寻找答案已被证明是徒劳的，而 Mozilla 拥有自己的讨论列表和错误跟踪器，公众似乎不太容易获得这些信息。

l20n 项目似乎处于不断变化的状态，在我使用的版本（3.0.5）中，据称与 ES5 兼容的 webcompat/l20n.js 需要 Polyfill，因为它使用了 Array.from(); 此外，示例和学习资源似乎与框架的使用方式不完全匹配。源代码完全没有文档记录，但尽管如此，到目前为止我对框架的大部分理解都是通过查看那里获得的。我在他们的代码中看不到对属性名称的任何过滤，所以我觉得这个问题可能是由于需要在 l20n 传递数据属性之前向浏览器注册元素（及其属性）。

提前感谢任何可能提供帮助的人。

4

1 回答 1

0

在我们的 l20n.js 文件中，有这个部分控制可以翻译哪些属性：

var allowed = { elements: ['a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr'], attributes: { global: ['title', 'aria-label', 'aria-valuetext', 'aria-moz-hint'], a: ['download'], area: ['download', 'alt'], // value is special-cased in isAttrAllowed input: ['alt', 'placeholder'], menuitem: ['label'], menu: ['label'], optgroup: ['label'], option: ['label'], track: ['label'], img: ['alt'], textarea: ['placeholder'], th: ['abbr'] } };

请注意，该片段来自当前在标准 NPM 存储库中发布的 l20n 版本，即dist/compat文件夹中的版本。

于 2017-01-19T15:52:05.530 回答