App-LOCALIZE-行为和嵌套模板 [英] app-localize-behavior and nested template
本文介绍了App-LOCALIZE-行为和嵌套模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在嵌套模板中使用行为(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....
赞赏示例。
谢谢
--Nick
编辑2016年5月5日
此处提供了一个显示该问题的小项目：https://github.com/nocquidant/polymer-intl/
说明在Readme.md中
推荐答案
更新(6/4/16)：<app-localize-behavior> bug是由Polymer core bug引起的，在聚合物1.5.0(jsfiddle)中现在是fixed。
更新(5/20/16)：这似乎是Polmer 1.4.0中的错误，如jsfiddle所示。我在上面的演示成功了，因为我使用的是大师提供的聚合物的最新代码。(请注意，自v1.4.0标记以来有几次提交。)
作为一种解决办法，使用Bower安装聚合物的工作提交(截至2016年5月20日，主分支处于提交状态409ad83，可与<app-localize-behavior>正常工作)：
bower i -S polymer#409ad83
Bower将提示您选择特定的聚合物版本，在这种情况下，您应该输入!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)：
<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>这篇关于App-LOCALIZE-行为和嵌套模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
