app-localize-behavior and nested template

2019-08-15 09:33发布

问题:

How can I manage to use a behavior (Polymer.AppLocalizeBehavior) inside a nested template: the created scope hides the localize() function.

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

Example appreciated.

Thanks

--nick

EDIT 2016 May, 05

A small project showing the issue is available here: https://github.com/nocquidant/polymer-intl/

Instructions are in README.md

回答1:

UPDATE (6/4/16): The <app-localize-behavior> bug was caused by a Polymer core bug, which is now fixed in Polymer 1.5.0 (jsfiddle).


UPDATE (5/20/16): This appears to be a bug in Polymer 1.4.0, as demonstrated in this jsfiddle. My demo from above had worked because I was using Polymer's latest code from master. (Note there are several commits since the v1.4.0 tag.)

As a workaround, use Bower to install a working commit of Polymer (as of 20-May-2016, the master branch is at commit 409ad83, which works properly with <app-localize-behavior>):

bower i -S polymer#409ad83

Bower will prompt you to select a specific Polymer version, in which case you should enter !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

I didn't have any trouble using localize('greeting') inside a template repeater. Can you post a jsfiddle of your code?

Here's a working snippet (based on <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">