Using Angular JS, you can sort a repeater using a filter in the following way:
<li ng-repeat="link.title for link in links | orderBy:'title'">
Now, I'm delving into experimenting with Polymer and wondering if it's possible to achieve something similar using a Polymer filter. My goal is to declaratively sort data within the markup without directly manipulating the dataset. So, I've attempted something like this (simplified code for clarity):
<polymer-element name="image-links" attributes="axis data width">
<template>
<core-ajax id="ajax"
auto
url="../data/{{data}}.json"
on-core-response="{{linksLoaded}}"
handleAs="json">
</core-ajax>
<ul>
<template repeat="{{link in links | sort}}">
<li>...</li>
</template>
</ul>
</template>
<script>
Polymer('image-links', {
links: [],
linksLoaded: function () {
this.links = this.$.ajax.response.data;
},
sort : function (a, b) {
var titleA = a.title.toLowerCase(), titleB = b.title.toLowerCase();
if (titleA < titleB) return -1;
if (titleA > titleB) return 1;
return 0;
}
});
</script>
I encountered an issue where the sort function in the element prototype receives an empty array (despite having objects in the links array).
Additionally, here is the response from the AJAX call I'm making:
{
"data" : [
{
"name" : "github",
"url" : "..."
},
{
"name" : "linked",
"url" : "..."
},
{
"name" : "stack",
"url" : "..."
},
{
"name" : "gplus",
"url" : "..."
},
{
"name" : "twitter",
"url" : "..."
}
]
}
Am I on the right track or is this a sign that I should call it a night?
Thanks in advance