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月，05

此处提供了一个显示此问题的小项目：https://github.com/nocquidant/polymer-intl/

说明在README.md

中

Answer 1

更新（6/4/16）： <app-localize-behavior> bug由Polymer core bug引起，现在在Polymer 1.5.0中fixed jsfiddle {3}}）。

更新（2016年5月20日）：这似乎是Polymer 1.4.0中的错误，如此jsfiddle所示。我上面的演示有效，因为我使用的是Polymer的最新代码。（注意，自v1.4.0标记以来有几次提交。）

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

bower i -S polymer#409ad83

Bower将提示您选择特定的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')时没有遇到任何问题。你可以发一个jsfiddle的代码吗？

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

＆＃13;

<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>

＆＃13;

^jsfiddle

app-localize-behavior和嵌套模板

1 个答案: