Javascript 跨自定义元素共享行为状态
我有两个自定义聚合物元素():Javascript 跨自定义元素共享行为状态,javascript,internationalization,polymer,polymer-1.0,Javascript,Internationalization,Polymer,Polymer 1.0,我有两个自定义聚合物元素(): 显示要翻译的文本 显示触发翻译加载的按钮 我还有一个保存翻译(json对象)并包含使翻译成为可能的所有函数的 这就是我期望发生的事情: 单击元素2中的按钮 翻译加载到行为中 在行为中设置语言选择 元素1中的文本更新为翻译后的等效文本 第1-3步会发生,但第4步不会。文本永远不会更新。如果元素1和2作为同一个元素组合在一起,我就可以让它工作,但如果它们是分开的(任何需要分开的元素)就不行 如果你想知道“kick”属性,这是我从Polymer 0.5中学到的。当这两个
要素1
{{本地化(标签,踢)}
聚合物({
是‘我的元素’,
行为:[
行为
],
特性:{
标签:{
类型:字符串,
值:“原始”
}
}
});
要素2
负载
聚合物({
是‘另一个元素’,
行为:[
行为
],
按钮点击:函数(){
这是注册表翻译('en'{
原文:“已更改”
})
这个。选择语言('en');
}
});
行为
var行为={
特性:{
踢:{
类型:数字,
数值:0
},
语言:{
类型:字符串,
价值观:“乐趣”
},
翻译:{
类型:对象,
值:函数(){
返回{};
}
}
},
本地化:功能(键,i){
if(this.translations[this.language]&&this.translations[this.language][key]){
返回此.translations[this.language][key];
}
返回键;
},
registerTranslation:函数(translationKey,translationSet){
this.translations[translationKey]=translationSet;
},
选择语言:函数(新语言){
this.language=newLanguage;
this.set('kick',this.kick+1);
}
};
首先,尽管概念是让行为
成为实例之间共享数据的管道,但正如所写的,每个实例都有自己的翻译
对象和kick
属性副本
其次,即使数据被私有化以便共享,通过localize(label,kick)
进行的kick
绑定与修改kick
的表达式(即this.set('kick',this.kick+1);
[{sic}这可能只是this.kick++;
])的范围不同
要通知N个实例共享数据的更改,必须跟踪这些实例。实现这一点的一个好方法是附加事件侦听器。另一种方法是简单地保留一个列表
以下是您设计的一个示例实现:
<script>
(function() {
var instances = [];
var translationDb = {};
var language = '';
window.behavior = {
properties: {
l10n: {
value: 0
}
},
attached: function() {
instances.push(this);
},
detached: function() {
this.arrayDelete(instances, this);
},
_broadcast: function() {
instances.forEach(function(i) {
i.l10n++;
});
},
localize: function(key, i) {
if (translationDb[language] && translationDb[language][key]) {
return translationDb[language][key];
}
return key;
},
registerTranslation: function(translationKey, translationSet) {
translationDb[translationKey] = translationSet;
},
selectLanguage: function(newLanguage) {
language = newLanguage;
this._broadcast();
}
};
})();
</script>
<dom-module id="my-element">
<template>
<p>{{localize(label, l10n)}}</p>
</template>
<script>
Polymer({
behaviors: [
behavior
],
properties: {
label: {
type: String,
value: 'original'
}
}
});
</script>
</dom-module>
<dom-module id="another-element">
<template>
<button on-tap="buttonClicked">load</button>
</template>
<script>
Polymer({
behaviors: [
behavior
],
buttonClicked: function() {
this.registerTranslation('en', {
original: 'changed'
});
this.selectLanguage('en');
}
});
</script>
</dom-module>
(功能(){
var实例=[];
var translationDb={};
var语言=“”;
window.behavior={
特性:{
l10n:{
数值:0
}
},
附:函数(){
实例。推(这个);
},
分离:函数(){
this.arrayDelete(实例,this);
},
_广播:函数(){
实例.forEach(函数(i){
i、 l10n++;
});
},
本地化:功能(键,i){
if(translationDb[语言]&&translationDb[语言][键]){
返回translationDb[语言][键];
}
返回键;
},
registerTranslation:函数(translationKey,translationSet){
translationDb[translationKey]=translationSet;
},
选择语言:函数(新语言){
语言=新语言;
这个;
}
};
})();
{{本地化(标签,l10n)}
聚合物({
行为:[
行为
],
特性:{
标签:{
类型:字符串,
值:“原始”
}
}
});
负载
聚合物({
行为:[
行为
],
按钮点击:函数(){
这是注册表翻译('en'{
原文:“已更改”
});
这个。选择语言('en');
}
});
<dom-module id="my-element">
<template>
<p>{{localize(label, kick)}}</p>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
behaviors: [
behavior
],
properties: {
label: {
type: String,
value: 'original'
}
}
});
</script>
<dom-module id="another-element">
<template>
<button on-click="buttonClicked">load</button>
</template>
</dom-module>
<script>
Polymer({
is: 'another-element',
behaviors: [
behavior
],
buttonClicked: function() {
this.registerTranslation('en', {
original: 'changed'
})
this.selectLanguage('en');
}
});
</script>
<script>
var behavior = {
properties: {
kick: {
type: Number,
value: 0
},
language: {
type: String,
value: 'fun'
},
translations: {
type: Object,
value: function() {
return {};
}
}
},
localize: function(key, i) {
if (this.translations[this.language] && this.translations[this.language][key]) {
return this.translations[this.language][key];
}
return key;
},
registerTranslation: function(translationKey, translationSet) {
this.translations[translationKey] = translationSet;
},
selectLanguage: function(newLanguage) {
this.language = newLanguage;
this.set('kick', this.kick + 1);
}
};
</script>
<script>
(function() {
var instances = [];
var translationDb = {};
var language = '';
window.behavior = {
properties: {
l10n: {
value: 0
}
},
attached: function() {
instances.push(this);
},
detached: function() {
this.arrayDelete(instances, this);
},
_broadcast: function() {
instances.forEach(function(i) {
i.l10n++;
});
},
localize: function(key, i) {
if (translationDb[language] && translationDb[language][key]) {
return translationDb[language][key];
}
return key;
},
registerTranslation: function(translationKey, translationSet) {
translationDb[translationKey] = translationSet;
},
selectLanguage: function(newLanguage) {
language = newLanguage;
this._broadcast();
}
};
})();
</script>
<dom-module id="my-element">
<template>
<p>{{localize(label, l10n)}}</p>
</template>
<script>
Polymer({
behaviors: [
behavior
],
properties: {
label: {
type: String,
value: 'original'
}
}
});
</script>
</dom-module>
<dom-module id="another-element">
<template>
<button on-tap="buttonClicked">load</button>
</template>
<script>
Polymer({
behaviors: [
behavior
],
buttonClicked: function() {
this.registerTranslation('en', {
original: 'changed'
});
this.selectLanguage('en');
}
});
</script>
</dom-module>