<div id="order">
<template repeat="{{items as item}}">
<p data-id="{{item.id}}" data-qty="{{item.qty}}" data-price="{{item.price}}">
<span>- {{item.id}}</span>
<span> x{{item.qty}}</span>
</p>
</template>
<p>- Total {{total}}€</p>
</div>
Tried itemsChanged first to update the total but that did not work because the observer does not look at the property items[id].qty
The documentation does mention a more specific observer but can not use it when items is a array.
{{items | sum }} fails too because it only updates one time at start up.
Last option is
var order = this.$.order
order.onMutation(order, this.sum)
But then polymer crashes without a error message. I just see a blank screen when I put it in ready:function(){...}
I would say it's not doable right now. or maybe with some crazy hack.
let me suggest that solution:
I have created simple polymer and use power of Computed properties
<polymer-element name="x-repeat">
<template>
<template repeat="{{items as item}}">
<div>{{item.q}}</div>
</template>
<div>Total is {{total}}</div>
</template>
<script>
Polymer({
items : [],
created : function () {
this.items = [{q:1}, {q:2}];
},
computed: { // NOTE: computed set
total: 'items | sum'
},
sum : function (items) { // NOTE : defined 'pipeline' function
var total = 0;
items.forEach(function (i) {
total += i.q;
});
return total;
}
});
</script>
</polymer-element>
Hope that helps!
Related
I am trying to get two way data-binding between a host element and a template in Polymer using templatizer. For example if I am trying to keep two input boxes in-sync:
<html>
<body>
<my-element>
<template >
<input type="text" value="{{test::change}}" />
<div>The value of 'test' is: <span>{{test}}</span></div>
</template>
</my-element>
<dom-module id="my-element">
<template>
<input type="text" value="{{test::change}}" />
value:
<p>{{test}}</p>
<div id="items"></div>
<content id="template"></content>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
test: {
type: String,
value: "a"
},
behaviors: [ Polymer.Templatizer ],
_forwardParentProp: function(prop, value) {debugger},
_forwardParentPath: function(path, value) {debugger},
_forwardInstanceProp: function(inst, prop, value) {debugger},
_forwardInstancePath: function(inst, path, value) {debugger},
ready: function() {
this._instanceProps = {
test: true
};
var templates = Polymer.dom(this.$.template).getDistributedNodes();
template = templates[1];
this.templatize(template);
var itemNode = this.stamp({ test: this.test});
Polymer.dom(this.$.items).appendChild(itemNode.root);
}
});
</script>
</body>
</html>
In the above code I hit the debugger in the _forwardInstanceProp but not any of the others. Why is this? Inside _forwardInstanceProp I can access my-element and manually update the test property. Is there a better way to do this? I also could add an observer on my-element to the test property and then propagate any changes in my-element to the template. Is there a better way to do that? I am just trying to understand what all four of these methods do and when/why they should be used.
It beats my why I can never get neither _forwardParentPath nor _forwardParentProp to run. However, I know when the other two run :)
_forwardInstanceProp runs for direct properties of model passed to stamp and _instanceProps is initialized:
this._instanceProps = {
text: true
};
var clone = this.stamp({
text: this.text
});
_forwardInstancePath on the other hand runs when you pass nested objects to stamp:
var clone = this.stamp({
nested: {
text: this.text
}
});
See this bin for an example: http://jsbin.com/kipato/2/edit?html,js,console,output
In the stamped template there are two inputs bound to two variables which trigger instanceProp and instancePath. Unfortunately I've been unable to fix the error thrown when the latter happens.
I am writing a simple widget that will create an output based on fetched data (taken from an AJAX request).
This version of the my-element is the non-configurable, standard one:
http://jsbin.com/rivala/edit?html,output#H:L56
Thing is, I want the user to be able to decide what the output will look like. Since Polymer doesn't allow us to extend existing elements, I went the other way around: I create a behaviour (err... excuse me, a behavior, it's so hard not to type that "u" every time) that does most of the work. Here is my result:
http://jsbin.com/yuxecu/edit?html,output
So, in order to create create an element, all the user needs to do is:
<dom-module id="my-element">
<template>
<!-- THE FOLLOWING PART IS THE ONLY THING THE USER WILL CHANGE -->
<paper-dropdown-menu label="Your favourite category">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{_data}}">
<paper-item>{{item.name}}</paper-item>
</template>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "my-element",
behaviors: [ MyBehaviour],
})
</script>
</dom-module>
And then use it:
I would have much much preferred something a little easier. For example, it would have been much nicer to allow something like this:
<my-element url="http://output.jsbin.com/zonona/3.js">
<template id="bindme">
<!-- THE FOLLOWING PART IS THE ONLY THING THE USER WILL CHANGE -->
<paper-dropdown-menu label="Your favourite category">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{_data}}">
<paper-item>{{item.name}}</paper-item>
</template>
</paper-dropdown-menu>
</template>
</my-element>
But I tried and tried and then tried some more, and it doesn't seem to be possible unless you really want to get your hands dirty.
Once extending non-native elements is possible, I assume I can just create an element declaratively that extends my-element and defines a new template. Till then...
Questions:
Does my code seem to be following at least roughly Polymer's best practices?
Is there a much easier way to do this, that I didn't think of?
Any more comments?
Thank you as ever...
I don't know what I am doing is quite the same thing, but you might be able to draw inspiration from it. I have created a generic dialog box that will provide the results from a database query in it, with the headings data driven and the row size and content also data driven. I actually create this element dynamically in a "manager" element.
Something like this is how the manager retrieves the data and creates the dialog (I call it a report-grid)...
newGrid: function(name, useId, useDates, parent) {
var self = this;
var body;
// jshint unused: false
var dataPromise = new Promise(function(accept, reject) {
var sendOptions = {
url: '/api/queries',
method: 'POST',
handleAs: 'json',
headers: {'content-type': 'application/json'}
};
body = {};
body.name = name;
if (useId) {
body.id = parent.id;
}
if (useDates) {
body.startdate = parent.startdate;
body.enddate = parent.enddate;
}
sendOptions.body = body;
var request = document.createElement('iron-request');
request.send(sendOptions).then(function() {
accept(request.response);
});
});
// jshint unused: true
var x;
var y;
var grid = document.createElement('pas-report-grid');
Polymer.dom(self).appendChild(grid);
if (this.grids.length === 0) {
x = 0;
y = 0;
} else {
x = this.grids[this.grids.length - 1].x + this.deltaX;
y = this.grids[this.grids.length - 1].y + this.deltaY;
}
this.grids.push(grid);
grid.open(dataPromise,body,x,y);
And then the element itself has a load of stuff (not shown) to provide drag and resize handles, but the core of the grid is the following templated stuff
<div class="layout horizontal">
<template is="dom-repeat" items="[[heading]]">
<span class="flex">[[item]]</span>
</template>
</div>
<iron-list id="grid" class="flex" items="[[data]]" as="row">
<template>
<div class="layout horizontal row" tabindex$="[[tabIndex]]" index="[[index]]">
<template is="dom-repeat" items="[[row]]" as="field">
<div class="flex field">[[field]]</div>
</template>
</div>
</template>
</iron-list>
The open function of the grid does this with the data
open: function(dataPromise, params, x, y) {
var self = this;
this.x = x;
this.y = y;
dataPromise.then(function(data) {
self.title = data.name;
self.heading = data.heading;
self.data = data.data;
self.$.griddialog.open();
});
this.params = params;
So what is happening here is the manager is making an iron request (also created dynamically) for a generic query that might or might not need an id and start and end dates, the server responds with a json object which contains a heading array, with a list of heading names, and a data array which is the rows, each row also being an array with the values from the query. I pass that info to the grid element as a promise - so it can get started, attach and so on, and then when the data arrives its loaded into a heading div and an iron list.
The grid element knows nothing about the actual query, how many fields each row will have, or indeed how many rows.
I am calling a polymer element within another element. The inner polymer element has a published attribute to which I am binding JSON from the parent polymer. However it is not getting reflected.
<polymer-element name="parent-test" attributes="testData">
<template>
This is Parent test
<child-test testdatachild="{{testData}}"></child-test>
</template>
<script>
Polymer('parent-test', {
testData: [],
ready: function () {
debugger;
this.testData = [1, 2, 3, 4]
}
});
</script>
</polymer-element>
<polymer-element name="child-test" attributes="testDataChild">
<template>
<!--{{testDataChild}}-->
<template repeat="{{test in testDataChild}}">
{{test}}
</template>
</template>
<script>
Polymer('child-test', {
testDataChild: [],
ready: function () {
debugger;
}
});
</script>
</polymer-element>
I am not sure what could be the problem here.
Edit:
Seems like I am not having the actual parentContent at the time of generating the child-polymer-element.
If I assign hardcoded values in ready function for this.parentContent, it doesnt work as well.
If I assign hardcoded values in create function for this parent.Content, it works.
So, I am not not sure if this is something related to generating the child polymer element before the values getting binded to parent.
Thanks,
Sam
I modified your plunk example and get it working without your workaround :
Plunk
<polymer-element name="child-test" attributes="testdatachild">
<template>
<br><br>
In Child el.:
<br>
<template repeat="{{test in testdatachild}}">
{{test}}
<br>
</template>
</template>
<script>
Polymer('child-test', {
ready: function () {
}
});
</script>
This is Parent test
<child-test testdatachild="{{testData}}"></child-test>
<br>
</template>
<script>
Polymer('parent-test', {
created: function () {
this.testData = [1, 2, 3, 4];
}
});
</script>
The main problem seems to be the order of the code
I guess it works better to first declare the child, then the parent, as the child is used in the parent...
Also, as specified in the polymer documentation :
polymer
Important: For properties that are objects or arrays, you should always initialize the properties in the created callback. If you set the default value directly on the prototype (or on the publish object), you may run into unexpected “shared state” across different instances of the same element.
Here is modified example of you code that works : Plunk
Why your example is not working, I don't have all answers buy you are right for one:
<!-- This won't work cause:
"Attributes on child-test were data bound prior to Polymer upgrading the element.
This may result in incorrect binding types." -->
This is Parent test
<child-test testdatachild="{{testData}}"></child-test>
What I'd like is for the following html:
<father name = "John">
<son name = "Bob">likes lollipops</son>
<son name = "David">likes computers</son>
</father>
to generate:
John has two sons, Bob and David:
Bob: likes lollipops
David: likes computers
Now, assume I've correctly written the "son" polymer tag, and it renders a block div with "Bob: likes lolipops" as the contents. this I can get working easily, so that I have something like:
John
Bob: likes lolipops
David: likes computers
However, to get that top line, I'm really not sure what the correct approach is, basically I'd like something like this:
<polymer-element name = "father" attributes = "name">
<template>
<style>...
</style>
<div layout vertical>
{{name}} has ???{count}??? sons, ???{{ iterate son nodes, print out name attribute for each }}???<br/>
<!-- I dont know how ot access JS here, so not sure how to turn all child nodes into a children array -->
<content select = "son"></content>
</div>
</template>
<script>
Polymer({});
</script>
</polymer-element>
There are probably a few ways of doing this, but here's one approach. (Full version on JSBin).
<polymer-element name="son-element" attributes="name" noscript>
<template>
<p>{{name}}: <content></content></p>
</template>
</polymer-element>
<polymer-element name="father-element" attributes="name">
<template>
<p>{{name}} has {{count}} sons, {{sons}}:</p>
<p><content id="content"></content></p>
</template>
<script>
Polymer({
count: 0,
sons: '',
domReady: function() {
var names = [].map.call(this.children, function(sonElement) {
return sonElement.name;
});
this.count = names.length;
this.sons = names.join(' and ');
}
});
</script>
</polymer-element>
<father-element name="John">
<son-element name="Bob">likes lollipops</son-element>
<son-element name="David">likes computers</son-element>
</father-element>
The key piece is hooking into the domReady lifecycle method of <father-element>, and inspecting its, erm, children. Since we know they'll all be <son-element>s, we just blindly look for their name attributes and map them to an array, but if you wanted you could take some steps to only query for the <son-element>s.
(Oh, and Polymer elements all need to have a - in their names, so you'd need to go with <father-element> (or the like) instead of <father>.)
This is my solution, it is based on Jeff Posnick's solution but with Scott Miles suggestion to listen for add- remove- events.
<polymer-element name="baby-element" attributes="name">
<template>
<p>{{name}}: <content></content> <input type="button" value="Kill Baby" on-click="{{killBaby}}"/></p>
</template>
<script>
Polymer("baby-element", {
attached: function(){
this.fire('baby-added');
},
killBaby: function(){
this.fire('baby-removed');
// this.remove();
},
detached: function() {
this.fire('baby-removed');
}
});
</script>
</polymer-element>
<polymer-element name="parent-element" attributes="name">
<template>
<p>{{name}} has {{count}} babys, {{babys}}:</p>
<p><content id="content"></content></p>
</template>
<script>
Polymer({
count: 0,
babys: '',
domReady: function() {
this.recalcBabys();
this.addEventListener('baby-added', this.babyAdded);
this.addEventListener('baby-removed', this.babyRemoved);
},
babyRemoved: function(e) {
e.target.remove();
this.recalcBabys();
},
babyAdded: function(e) {
this.recalcBabys();
},
recalcBabys: function(){
var names = [].map.call(this.children, function(babyElement) {
return babyElement.name;
});
this.count = names.length;
this.babys = names.join(' and ');
}
});
</script>
</polymer-element>
<h1>It's aparent baby thing:</h1>
<input type=button value="make baby" id="makeBaby"></input>
<input type=input placeholder="baby name" id="babyName"></input>
<input type=input placeholder="baby info" id="babyInfo"></input>
<parent-element id="parent" name="Slim Sim">
<baby-element name="Curie">has X</baby-element>
<baby-element name="Korbut">volts like no other!</baby-element>
<baby-element name="Pavlov">has dogs!</baby-element>
<baby-element name="Schrodinger">... maybe has a cat?</baby-element>
</parent-element>
<script>
document.getElementById('makeBaby').addEventListener('click', function(){
var name = document.getElementById('babyName');
var info = document.getElementById('babyInfo');
var parent = document.getElementById('parent');
var baby = document.createElement("baby-element");
var inner = document.createTextNode(info.value);
baby.appendChild(inner);
baby.setAttribute("name",name.value);
parent.appendChild(baby);
});
</script>
I did not manage to get the parent-element to recalculateBabys if the baby is removed from outside, with for instance document.getElementsByTagName('baby-element')[0].remove().
I would have liked to (on the baby-element) only have the attached and detached methods fire the baby-added and baby-removed events, and the killBaby-funktion to only do 'this.remove()'.
But I could never get the Parent to hear all those events...
Please feel free to scrutinize this code and tell me any errors, I am kind of new to Polymer, but I still hop I can contribute!
This seems a trivial thing but I'm unable to find it:
What if I want to reverse the order of my items in a repeat, without actually touching the order of the array, like in:
<template repeat="{{layer in layers}}">
<div>{{layer.name}}</div>
</template>
where layers is an array of objects.
I've tried applying a filter and then working with a copy of the array, like in:
<template repeat="{{layer in layers | reverse}}">
<div>{{layer.name}}</div>
</template>
...
reverse: function(arr){
return _(arr).reverse();
}
but that results in some observers failing since they're looking at the copy instead of the original objects. I don't want to apply a sort to my original array since other parts of the code depend on that order.
Anyone knows of an option where just the order of display in the DOM is affected?
I think you need to do something like this
<template repeat="{{layer in temp_array}}">
<div>{{layer.name}}</div>
</template>
<script>
Polymer('el-name',{
ready: function(){
this.temp_array =[];
this.temp_array = layers.reverse();
}
}
);
</script>
if your layers is empty when ready called, use change listener
<script>
Polymer('el-name',{
ready: function(){
this.temp_array =[];
},
layersChanged: function(oldValue, newValue){
if(newValue.length != 0)
this.temp_array = newValue.reverse();
}
}
);
</script>
Hope it help for you
If it is possible to put the repeated elements in a vertical/horizontal layout, then reverse might do the trick (see layout documentation):
<div vertical layout reverse?="{{ isReversed }}">
<template repeat="{{ layer in layers }}">
<div>{{ layer.name }}</div>
</template>
</div>
I would like to offer a safier and more clear way to revert an array for repeat binding:
<polymer-element name="my-element" attributes="layers layersReversed">
<template>
<template repeat="{{layer in layers}}">
<div>{{layer.name}}</div>
</template>
</template>
<script>
Polymer({
layersReversedChanged: function() {
var layers = this.layersReversed.slice();
layers.reverse();
this.layers = layers;
}
});
</script>
</polymer-element>
<my-element layers="{{layers}}"><!-- direct order --></my-element>
<my-element layersReversed="{{layers}}"><!-- reverse order --></my-element>
Direct or reverse order is defined by used attribute: layers or layersReversed.
There are no value changing in corresponding -Changed event by itself (which may cause falling to endless loop).
The .reverse() method changes the original array, so it should be applied on its copy.
There is another funny and extravagant way to do the same via an intermediate web-component:
<polymer-element name="reverse-order" attributes="in out">
<template></template>
<script>
Polymer({
inChanged: function() {
var out = this.in.slice();
out.reverse();
this.out = out;
}
});
</script>
</polymer-element>
It can be used to bind some elements with different order. I.e., array is populated by .push() method, while preferred array presentation is in reverse order:
<my-element layers="{{layersReversed}}"></my-element>
<reverse-order in="{{layers}}" out="{{layersReversed}}"></reverse-order>
<core-localstorage name="layers" value="{{layers}}"></core-localstorage>