app-localize-behavior 和嵌套模板

Question

如何设法在嵌套模板中使用行为 (Polymer.AppLocalizeBehavior)：创建的作用域隐藏了 localize() 函数。

<template>
...
<div class="content">
  <div class="card-container">
    {{localize('greeting')}} <---- OK!

    <div class="layout horizontal wrap">
      <template is="dom-repeat" items="{{employees}}">
        <paper-card>
          <div class="card-content">
            <h2>{{localize('greeting')}}</h2> <---- EMPTY....

示例表示赞赏。

谢谢

--尼克

编辑 2016 年 5 月 5 日

这里有一个显示问题的小项目：https://github.com/nocquidant/polymer-intl/

说明在README.md

Answer 1

更新（6/4/16）： <app-localize-behavior> bug was caused by a Polymer core bug, which is now fixed in Polymer 1.5.0 (jsfiddle）。

更新 (5/20/16): 这似乎是 Polymer 1.4.0 中的一个错误，如 jsfiddle 中所示。我上面的演示之所以有效，是因为我使用的是来自 master 的 Polymer 最新代码。（请注意，自 v1.4.0 标记以来有多个提交。）

作为解决方法，使用 Bower 安装 Polymer 的工作提交（截至 2016 年 5 月 20 日，master 分支位于提交 409ad83，可与 <app-localize-behavior> 一起正常工作）：

bower i -S polymer#409ad83

Bower 会提示您 select 一个特定的 Polymer 版本，在这种情况下您应该输入 !1.

Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
    1) polymer#409ad83 which resolved to 409ad83
    2) polymer#^1.4.0 which resolved to 1.4.0 and is required by polymer-intl
    3) polymer#^1.0.0 which resolved to 1.4.0 and is required by iron-media-query#1.0.8
    4) polymer#^1.2.1 which resolved to 1.4.0 and is required by paper-behaviors#1.0.11
    5) polymer#^1.3.0 which resolved to 1.4.0 and is required by app-localize-behavior#0.9.0
    6) polymer#^1.2.0 which resolved to 1.4.0 and is required by iron-selector#1.5.2
    7) polymer#^1.1.0 which resolved to 1.4.0 and is required by iron-flex-layout#1.3.1

Prefix the choice with ! to persist it to bower.json

? Answer

我在模板转发器中使用 localize('greeting') 没有遇到任何问题。你能 post 你的代码的 jsfiddle 吗？

这是一个工作片段（基于 <app-localize-behavior> demo）：

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-toggle-button/paper-toggle-button.html">
  <link rel="import" href="app-localize-behavior/app-localize-behavior.html">

</head>

<body>
  <x-local-translate></x-local-translate>

  <dom-module id="x-local-translate">
    <template>

      <div>
        <span title="english"></span>
        <paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
        <span title="french"></span>
      </div>

      <div>
        <h4>Outside Repeater</h4>
        <div>
          <div>{{localize('greeting')}}</div>
        </div>

        <h4>Template Repeater Items</h4>
        <template is="dom-repeat" items="{{things}}">
          <div>{{localize('greeting')}}</div>
        </template>

      </div>
    </template>

    <script>
      Polymer({
        is: "x-local-translate",
        behaviors: [
          Polymer.AppLocalizeBehavior
        ],
        properties: {
          things: {
            type: Array,
            value: function() {
              return [1, 2, 3];
            }
          },

          /* Overriden from AppLocalizeBehavior */
          language: {
            value: 'en',
            type: String
          },

          /* Overriden from AppLocalizeBehavior */
          resources: {
            type: Object,
            value: function() {
              return {
                'en': {
                  'greeting': 'Hello!'
                },
                'fr': {
                  'greeting': 'Bonjour!'
                }
              };
            }
          }
        },
        _toggle: function() {
          this.language = this.$.switch.checked ? 'fr' : 'en';
        }
      });
    </script>
  </dom-module>
</body>

^jsfiddle

app-localize-behavior 和嵌套模板

app-localize-behavior and nested template

polymer

polymer-1.0