Given this type of usage:
<polymer-element name="x-thing">
<template>
<template repeat="{{user in users}}">
<x-item manager="{{manager}}"></x-item>
</template>
</template>
<script>
Polymer('x-thing', {
ready: function() {
this.manager = {name: "Bob"};
}
});
</script>
</polymer-element>
The expectation here is that x-thing's manager property is bound directly to x-item's manager property.
However, the use of the scoped model {{user in users}} makes the binding 1-way instead of 2-way. The model used to populate x-item is no longer x-thing but instead an object with a user property an x-thing as its prototype. Therefore, when x-item sets manager is does not change the value in x-thing.
This behavior can be worked around by setting a reference to the element inside itself like this:
<polymer-element name="x-thing">
<template>
<template repeat="{{user in users}}">
<x-item manager="{{self.manager}}"></x-item>
</template>
</template>
<script>
Polymer('x-thing', {
ready: function() {
this.self = this;
this.manager = {name: "Bob"};
}
});
</script>
</polymer-element>
Given this type of usage:
The expectation here is that x-thing's manager property is bound directly to x-item's manager property.
However, the use of the scoped model
{{user in users}}makes the binding 1-way instead of 2-way. The model used to populate x-item is no longer x-thing but instead an object with a user property an x-thing as its prototype. Therefore, when x-item sets manager is does not change the value in x-thing.This behavior can be worked around by setting a reference to the element inside itself like this: