我正试图在同一元素的实例之间同步我的一些web组件属性，因此，如果其中一个属性发生更改，那么所有实例中的同一属性都会更新为相应的绑定和事件。
注意：我想使用聚合物数据系统概念进行实例之间的通信。
示例
my element.html
<dom-module id="my-element">
<script>
Polymer({
is: 'my-element',
properties: {
myProp: {
type: String,
notify: true
}
});
</script>
</dom-module>
我的其他元素.html
<dom-module id="my-other-element">
<template>
<my-element my-prop="{{otherProp}}"></my-element>
</template>
<script>
Polymer({
is: 'my-other-element',
properties: {
otherProp: {
type: String,
notify: true,
readOnly: true
}
}
})
</script>
</dom-module>
我的app.html
<dom-module id="my-app">
<template>
<my-element id="element"></my-element>
<my-other-element id="otherElement"
on-other-prop-changed="onPropChanged"
></my-other-element>
</template>
<script>
Polymer({
is: 'my-app',
attached: function () {
// should set 'myProp' to 'test' and trigger
// the event 'my-prop-changed' in all my-element instances
this.$.element.myProp = 'test'
},
onPropChanged: function (ev, detail) {
console.log(detail.value); // should print 'test'
console.log(this.$.element.myProp); // should print 'test'
console.log(this.$.otherElement.otherProp); // should print 'test'
}
});
</script>
</dom-module>
PD:最好使用类似标准的模式和良好实践。
tl；dr
我创建了一个自定义行为，它同步所有具有notify: true的元素的属性。工作原型：JSBin。
目前，这个原型不区分不同类型的元素，这意味着它只能同步同一自定义元素的实例，但这可以在不付出太多努力的情况下进行更改。
您还可以定制行为，使is只同步所需的属性，而不是全部与notify: true同步。但是，如果您采用此路径，请注意，要同步的所有属性都必须具有notify: true，因为行为会侦听<property-name>-changed事件，只有当属性具有notify: true时才会触发该事件。
详细信息
让我们从自定义SyncBehavior行为开始：
(function() {
var SyncBehaviorInstances = [];
var SyncBehaviorLock = false;
SyncBehavior = {
attached: function() {
// Add instance
SyncBehaviorInstances.push(this);
// Add listeners
for(var property in this.properties) {
if('notify' in this.properties[property] && this.properties[property].notify) {
// Watch all properties with notify = true
var eventHanler = this._eventHandlerForPropertyType(this.properties[property].type.name);
this.listen(this, Polymer.CaseMap.camelToDashCase(property) + '-changed', eventHanler);
}
}
},
detached: function() {
// Remove instance
var index = SyncBehaviorInstances.indexOf(this);
if(index >= 0) {
SyncBehaviorInstances.splice(index, 1);
}
// Remove listeners
for(var property in this.properties) {
if('notify' in this.properties[property] && this.properties[property].notify) {
// Watch all properties with notify = true
var eventHanler = this._eventHandlerForPropertyType(this.properties[property].type.name);
this.unlisten(this, Polymer.CaseMap.camelToDashCase(property) + '-changed', eventHanler);
}
}
},
_eventHandlerForPropertyType: function(propertyType) {
switch(propertyType) {
case 'Array':
return '__syncArray';
case 'Object':
return '__syncObject';
default:
return '__syncPrimitive';
}
},
__syncArray: function(event, details) {
if(SyncBehaviorLock) {
return; // Prevent cycles
}
SyncBehaviorLock = true; // Lock
var target = event.target;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
if(details.path === undefined) {
// New array -> assign by reference
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, details.value);
}
});
} else if(details.path.endsWith('.splices')) {
// Array mutation -> apply notifySplices
var splices = details.value.indexSplices;
// for all other instances: assign reference if not the same, otherwise call 'notifySplices'
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
var instanceReference = instance.get(prop);
var targetReference = target.get(prop);
if(instanceReference !== targetReference) {
instance.set(prop, targetReference);
} else {
instance.notifySplices(prop, splices);
}
}
});
}
SyncBehaviorLock = false; // Unlock
},
__syncObject: function(event, details) {
var target = event.target;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
if(details.path === undefined) {
// New object -> assign by reference
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, details.value);
}
});
} else {
// Property change -> assign by reference if not the same, otherwise call 'notifyPath'
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
var instanceReference = instance.get(prop);
var targetReference = target.get(prop);
if(instanceReference !== targetReference) {
instance.set(prop, targetReference);
} else {
instance.notifyPath(details.path, details.value);
}
}
});
}
},
__syncPrimitive: function(event, details) {
var target = event.target;
var value = details.value;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, value);
}
});
},
};
})();
请注意，我已经使用IIFE模式来隐藏包含自定义元素my-element的所有实例的变量。这是至关重要的，所以不要改变它。
正如您所看到的，行为由六个功能组成，即：
attached，它将当前实例添加到实例列表中，并使用notify: true注册所有属性的侦听器detached，它从实例列表中删除当前实例，并删除具有notify: true的所有属性的侦听器_eventHandlerForPropertyType，根据属性类型返回函数4-6之一的名称__syncArray，它在实例之间同步Array类型属性。请注意，为了避免循环，我忽略了当前目标并实现了一个简单的锁定机制。该方法处理两种情况：分配一个新数组和更改现有数组__syncObject，它在实例之间同步Object类型属性。请注意，为了避免循环，我忽略了当前目标并实现了一个简单的锁定机制。该方法处理两种情况：分配新对象和更改现有对象的属性__syncPrimitive，它在实例之间同步属性的基元值。请注意，为了避免循环，我忽略了当前目标
为了测试我的新行为，我创建了一个示例自定义元素：
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[id]]</h2>
<ul>
<li>propString: [[propString]]</li>
<li>
propArray:
<ol>
<template is="dom-repeat" items="[[propArray]]">
<li>[[item]]</li>
</template>
</ol>
</li>
<li>
propObject:
<ul>
<li>name: [[propObject.name]]</li>
<li>surname: [[propObject.surname]]</li>
</ul>
</li>
</ul>
</template>
<script>
Polymer({
is: 'my-element',
behaviors: [
SyncBehavior,
],
properties: {
id: {
type: String,
},
propString: {
type: String,
notify: true,
value: 'default value',
},
propArray: {
type: Array,
notify: true,
value: function() {
return ['a', 'b', 'c'];
},
},
propObject: {
type: Object,
notify: true,
value: function() {
return {'name': 'John', 'surname': 'Doe'};
},
},
},
pushToArray: function(item) {
this.push('propArray', item);
},
pushToNewArray: function(item) {
this.set('propArray', [item]);
},
popFromArray: function() {
this.pop('propArray');
},
setObjectName: function(name) {
this.set('propObject.name', name);
},
setNewObjectName: function(name) {
this.set('propObject', {'name': name, 'surname': 'unknown'});
},
});
</script>
</dom-module>
它有一个String属性、一个Array属性和一个Object属性；均为CCD_ 16。自定义元素还实现了SyncBehavior行为。
要将以上所有内容组合到一个工作原型中，只需执行以下操作：
<template is="dom-bind">
<h4>Primitive type</h4>
propString: <input type="text" value="{{propString::input}}" />
<h4>Array type</h4>
Push to propArray: <input type="text" id="propArrayItem" /> <button onclick="_propArrayItem()">Push</button> <button onclick="_propNewArrayItem()">Push to NEW array</button> <button onclick="_propPopArrayItem()">Delete last element</button>
<h4>Object type</h4>
Set 'name' of propObject: <input type="text" id="propObjectName" /> <button onclick="_propObjectName()">Set</button> <button onclick="_propNewObjectName()">Set to NEW object</button> <br />
<script>
function _propArrayItem() {
one.pushToArray(propArrayItem.value);
}
function _propNewArrayItem() {
one.pushToNewArray(propArrayItem.value);
}
function _propPopArrayItem() {
one.popFromArray();
}
function _propObjectName() {
one.setObjectName(propObjectName.value);
}
function _propNewObjectName() {
one.setNewObjectName(propObjectName.value);
}
</script>
<my-element id="one" prop-string="{{propString}}"></my-element>
<my-element id="two"></my-element>
<my-element id="three"></my-element>
<my-element id="four"></my-element>
</template>
在这个原型中，我创建了my-element的四个实例。一个将propString绑定到输入，而另一个则根本没有任何绑定。我创建了一个简单的表单，涵盖了我能想到的每一个场景：
- 更改基元值
- 将项目推送到数组中
- 正在创建一个新数组(包含一个项)
- 正在从数组中删除项
- 正在设置对象属性
- 正在创建新对象
编辑
我已经更新了我的帖子和原型，以解决以下问题：
- 同步非基元值，即数组和对象
- 正确地将属性名称从Dash大小写转换为Camel大小写(反之亦然)
我们创建了一个组件来同步不同实例之间的数据。我们的组件是：
<dom-module id="sync-data">
<template>
<p>Debug info: {scope:[[scope]], key:[[key]], value:[[value]]}</p>
</template>
<script>
(function () {
var items = []
var propagateChangeStatus = {}
var togglePropagationStatus = function (status) {
propagateChangeStatus[this.scope + '|' + this.key] = status
}
var shouldPropagateChange = function () {
return propagateChangeStatus[this.scope + '|' + this.key] !== false
}
var propagateChange = function (key, scope, value) {
if (shouldPropagateChange.call(this)) {
togglePropagationStatus.call(this, false)
var itemsLength = items.length
for (var idx = 0; idx < itemsLength; idx += 1) {
if (items[idx] !== this && items[idx].key === key && items[idx].scope === scope) {
items[idx].set('value', value)
}
}
togglePropagationStatus.call(this, true)
}
}
Polymer({
is: 'sync-data',
properties: {
key: {
type: String,
value: ''
},
scope: {
type: String,
value: ''
},
value: {
type: String,
notify: true,
observer: '_handleValueChanged',
value: ''
}
},
created: function () {
items.push(this)
},
_handleValueChanged: function (newValue, oldValue) {
this.typeof = typeof newValue
propagateChange.call(this, this.key, this.scope, newValue)
}
})
})()
</script>
</dom-module>
我们在这样的组件中使用它：
<sync-data
key="email"
scope="user"
value="{{email}}"></sync-data>
在另一个类似的组件中：
<sync-data
key="email"
scope="user"
value="{{userEmail}}"></sync-data>
通过这种方式，我们获得了聚合物对事件和结合的固有行为
我个人对此类问题的看法是使用通量架构。
您创建了一个包装器Element，它将所有信息分发给子级。所有的变化都通过主组件进行。
<app-wrapper>
<component-x attr="[[someParam]]" />
<component-x attr="[[someParam]]" />
<component-x attr="[[someParam]]" />
</app-wrapper>
component-x在app-wrapper上触发一个更改值事件，app-wrapper正在更新someValue，注意这是一个单向绑定。
有一个组件可以实现redux体系结构，但也可以编写自己的代码。这或多或少是观测者模式
my-app.html试试这个。我看不出有任何理由不在这里使用双向绑定。
<dom-module id="my-app">
<template>
<my-element my-prop="{{myProp}}"></my-element>
<my-element my-prop="{{myProp}}"></my-element>
</template>
<script>
Polymer({
is: 'my-app',
ready: function() {
this.myProp = 'test';
}
});
</script>
</dom-module>
尽管使用properties对象而不是ready回调给myProp一个默认值可能是更好的做法。示例：
Polymer({
is: 'my-app',
properties: {
myProp: {
type: String,
value: 'test'
}
});