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