I need to initialize event listeners based on object passed as a property.
Scenario: My custom element needs to handle events from another composed polymer element, i need to do it based on params passed as a property.
if I try to use methods ready(), attached() or domReady() this.>property_name< attribute is not binded yet to property and this.getAttribute(>property_name<) give me raw strings before expression evaluation, eg, {{>property_bind_expression<}} not the evaluated value.
So i need to initialize my element after attribute is evaluated and initialized from property. Or maybe get evaluated property directly or call the expression evaluation method on raw property to finish element initialization.
How can i do that ?
Source code on github: https://github.com/mmacedoeu/crud-form
demo.json:
{ "title" : "Solicitação de Crédito",
"lovs" : [ {
"id": "filter",
"formid": "crud_form",
"action": "test",
"readonly": "no",
"keypairs"
: [ ["null", ""],
["=","igual"],
["contains","contém"],
["startwith","inicia com"],
["finishwith","termina com"],
["between","entre"]
]
},
{
"id": "filter2",
"keypairs"
: [ ["=", "igual"],
[">", "maior que"],
["<", "menor que"],
["between", "entre"]
]
}
],
"values":
[
{ "label": "Cliente",
"id": "cliente",
"length": "15",
"mask": "\\d"
},
{ "label": "Tipo de Solicitação",
"id": "tiposol",
"length": "11",
"mask": "\\d",
"filter": {
"default":"finishwith",
"lov": {
"ref": "filter",
"includes":"*"
}
}
},
{ "label": "Segmento Financeiro",
"id": "segfin",
"length": "15",
"mask": "\\d",
"title": "Entre dígito verificador, um numeral!",
"filter": null
},
{ "label": "Segmento Financeiro Solicitante",
"id":"segfinsol",
"length": "4",
"mask": "\\w",
"filter": {
"default":"contains",
"lov": {
"ref": "filter",
"includes":"*"
}
}
},
{ "label": "Responsável Financeiro",
"id":"respfin",
"mask": "\\w"
}
]
}
demo.html :
<!DOCTYPE html>
<html>
<head>
<title>crud-form Demo</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link href="../paper-input/paper-input.html" rel="import">
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../paper-dropdown/paper-dropdown.html" rel="import">
<link href="../paper-item/paper-item.html" rel="import">
<link href="../paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../core-toolbar/core-toolbar.html" rel="import">
<link href="../paper-fab/paper-fab.html" rel="import">
<link href="../font-roboto/roboto.html" rel="import" >
<link href="../ajax-form/ajax-form.html" rel="import" >
<link href="../paper-button/paper-button.html" rel="import">
<link rel="import" href="../core-media-query/core-media-query.html">
<link rel="import" href="../core-ajax/core-ajax.html">
</head>
<body unresolved>
<polymer-element name="crud-form" attributes="fields wide debug">
<template>
<link rel="stylesheet" href="crud-form.css">
<template if={{debug}}>
<span>Responsive design wide form: {{wide ? 'Verdadeiro' : 'Falso'}} !</span>
<span>lovs: </span>
</template>
<template repeat="{{lov in fields.lovs}}">
<template if={{debug}}>
<span>ID: {{lov.id}}</span>
</template>
<template repeat="{{kp in lov.keypairs}}">
<template if={{debug}}>
<span>keypair: {{kp[0]}} - {{kp[1]}}</span>
</template>
</template>
</template>
<div id="searchPanel" class="search-panel {{ {wide: wide} | tokenList }}" flex vertical layout?="{{!wide}}">
<div class="card" flex?="{{!wide}}" vertical layout?="{{!wide}}">
<core-toolbar>
<span flex>{{fields.title}}</span>
<template if={{!fields.readonly}}>
<paper-button raised>Limpar</paper-button>
<paper-fab icon="add" class="yellow"></paper-fab>
</template>
</core-toolbar>
<form id={{fields.formid}} is="ajax-form" action="{{fields.action}}" method="post" class="search-content" flex>
<!-- div id="searchContent" class="search-content" flex -->
<template repeat="{{field in fields.values}}">
<section horizontal?={{debug}} layout?={{debug}}>
<template if={{debug}}>
<span>{{field.label}}:</span>
</template>
<paper-input-decorator id="{{field.id}}" label="{{field.label}}" floatingLabel>
<input is="core-input" maxlength="{{field.length}}" id="{{field.id}}"
type="{{field.type}}" min="0" title="{{field.title}}" pattern="{{field.mask}}"/>
</paper-input-decorator>
</section>
</template>
</form>
</div>
</div>
<content></content>
</template>
<script>
PolymerExpressions.prototype.property = function (input, property, value) {
return input.filter(function(item){
return item[property] === value;
});
};
Polymer('crud-form', {
wide: true,
debug: false,
fields: null,
invalid: function() {
console.log('invalid form');
},
submitting: function(event) {
console.log('submitting form');
},
submitted: function(event) {
console.log('submitted form');
},
created: function() {
console.log("created");
},
attached: function () {
console.log("attached");
},
domReady: function() {
console.log("domReady");
},
detached: function() {
console.log("detached");
},
attributeChanged: function(attrName, oldVal, newVal) {
//var newVal = this.getAttribute(attrName);
console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
},
ready: function() {
console.log("ready");
var form = this.shadowRoot.querySelector('form');
console.log(form);
var events = [ 'invalid', 'submitting', 'submitted'];
for (var event in events) {
form.addEventListener(event, this[event]);
}
console.log(this.getAttribute('fields'));
console.log(this.fields);
}
});
</script>
</polymer-element>
<polymer-element name="match-example" properties="debug">
<template>
<core-media-query query="{{query}}" queryMatches="{{wide}}"></core-media-query>
<core-ajax auto handleAs="json" url="demo.json" response="{{crud_form}}" progress="{{progress}}"
loading="{{loading}}"
></core-ajax>
<template if="{{debug}}">
<div>
<template if="{{loading}}">
Loading...
</template>
<template if="{{!loading}}">
Loaded!
</template>
</div>
</template>
<crud-form id="element" formid="crud_id" fields={{crud_form}} wide="{{wide}}" debug={{debug}}>
<template if="{{debug}}">
<span>And this is my client-provided content with {{wide}}</span>
</template>
</crud-form>
</template>
<script>
Polymer('match-example', {
query: 'min-width: 900px'
});
</script>
</polymer-element>
<p>An example of crud-form looks like this:</p>
<match-example id="me" debug=false></match-example>
</body>
</html>
The docs state this:
"String concatenation is not supported inside a tag, and the tag can’t contain any whitespace"
For example:
<span>ID: {{lov.id}}</span>
Should be:
<span>ID: </span><span>{{lov.id}}</span>
I had a similar problem and by removing the whitespace and any concatenations, the binding worked as expected.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html
Related
On loading the page, I load all the notifications that are array of objects. Each object has an isRead value that is a boolean.
I want the checkbox in the table to be filled with a check mark if the value isRead = true for a certain object, and if not, to leave the checkbox empty. And when the checkbox is clicked to add/remove its value in the object.
If it's not a problem, I'd like you to write me the code because I'm new to vue and Typescript
`This is component : `
const notificationStore = useNotificationStore()
let allNotifications = ref<NotificationData[]>([])
let isNotificationRead = ref<boolean>(false)
const isDeleteDialogOpen = ref(false)
const isEditDialogOpen = ref(false)
async function getAllNotifications() {
try {
let response = await notificationStore.getNotifications();
allNotifications.value = response.data.data;
console.log(allNotifications.value)
} catch (error) {
throw error;
}
allNotifications.value.forEach((el) => {
if(el.isRead == true){
let isNotificationRead = true
}
else {
let isNotificationRead = false
}
});
}
getAllNotifications()
</script>
<template>
<Section>
<template #title>
Notifications
</template>
<template #body>
<el-table :data="allNotifications" style="width: 100%">
<el-table-column label="Updated At">
<template #default="prop">
<el-row>
<span style="margin-left: 10px">{{ prop.row.updatedAt }}</span>
</el-row>
</template>
</el-table-column>
<el-table-column label="Message">
<template #default="prop">
<el-row>
<span style="margin-left: 10px">{{ prop.row.message }}</span>
</el-row>
</template>
</el-table-column>
<el-table-column align="right">
<template #default="prop">
<el-checkbox v-model="prop.isNotificationRead" label="Read" size="small" />
<el-icon >
<Delete #click="isDeleteDialogOpen = true" />
</el-icon>
</template>
</el-table-column>
</el-table>
</template>
</Section>
<el-dialog
v-model="isDeleteDialogOpen"
title="Are You Sure You Want to Remove This Notification?"
align-center
:show-close="false"
><template #header="{ close, titleId, titleClass }">
<h3 >Are You Sure You Want to Remove this Notification?</h3>
</template>
<span>This will remove </span>
<span class="point-out-text">{{}}</span>
<span> from use. This will delete all the items it contains. Are you sure you want to remove it?</span>
<template #footer>
<span>
<el-row justify="end">
<el-button type="danger" #click="">
Yes, remove it
</el-button>
<el-button #click="isDeleteDialogOpen = false">
Cancel
</el-button>
</el-row>
</span>
</template>
</el-dialog>
<el-dialog
v-model="isEditDialogOpen"
show-close
>
<template #header>
<DialogHeading>
<template #title>Edit Notification</template>
<template #subtitle>Edit the existing Notification. Change notification description...</template>
</DialogHeading>
</template>
<template #footer>
<span>
<el-row justify="end">
<el-button type="primary" #click="">
Save
</el-button>
<el-button #click="isEditDialogOpen = false">
Cancel
</el-button>
</el-row>
</span>
</template>
</el-dialog>
</template>
<style scoped>
</style>
`
this is form of data : `data": [
{
"id": "6f81bfca-94a5-4cc9-93c0-48fa7d10c866",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Design you have experience in has been removed.",
"isRead": true,
"createdAt": "2023-01-23T09:19:48.305202",
"updatedAt": "2023-01-24T12:25:18.412720",
"deletedAt": null
},
{
"id": "20d22d45-553f-4926-a6df-9014a277cd80",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Backend you have experience in has been removed.",
"isRead": false,
"createdAt": "2023-01-23T09:19:16.969621",
"updatedAt": "2023-01-23T09:19:16.969621",
"deletedAt": null
},
{
"id": "2cca79e5-1b68-4aad-b8fc-4581e758347d",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Frontend you have experience in has been removed.",
"isRead": false,
"createdAt": "2023-01-23T09:19:11.622430",
"updatedAt": "2023-01-23T09:19:11.622430",
"deletedAt": null
}
]`
`
I'm waiting for a good person to help me because I've tried really everything and I don't know how to solve it.
You can simply achieve this by passing the prop isRead into the v-model instead of creating a separate variable which is not associated with the objects separately and as v-model work as a two way data binding it will update the isRead property value automatically.
Live Demo :
var Main = {
data() {
return {
tableData: [
{
"id": "6f81bfca-94a5-4cc9-93c0-48fa7d10c866",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Design you have experience in has been removed.",
"isRead": true,
"createdAt": "2023-01-23T09:19:48.305202",
"updatedAt": "2023-01-24T12:25:18.412720",
"deletedAt": null
},
{
"id": "20d22d45-553f-4926-a6df-9014a277cd80",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Backend you have experience in has been removed.",
"isRead": false,
"createdAt": "2023-01-23T09:19:16.969621",
"updatedAt": "2023-01-23T09:19:16.969621",
"deletedAt": null
},
{
"id": "2cca79e5-1b68-4aad-b8fc-4581e758347d",
"userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
"message": "Category Frontend you have experience in has been removed.",
"isRead": false,
"createdAt": "2023-01-23T09:19:11.622430",
"updatedAt": "2023-01-23T09:19:11.622430",
"deletedAt": null
}]
}
},
methods: {
updateCheckBox(rowId) {
this.tableData.forEach(row => {
if (row.id === rowId) {
console.log(row.isRead)
}
})
}
}
}
var app = Vue.extend(Main)
new app().$mount('#app')
<script src="https://unpkg.com/vue#2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui#2.13.2/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui#2.13.2/lib/theme-chalk/index.css"/>
<div id="app">
<template>
<el-table :data="tableData" ref="table" border style="width: 500px">
<el-table-column label="Updated At">
<template #default="prop">
<el-row>
<span style="margin-left: 10px">{{ prop.row.updatedAt }}</span>
</el-row>
</template>
</el-table-column>
<el-table-column label="Message">
<template #default="prop">
<el-row>
<span style="margin-left: 10px">{{ prop.row.message }}</span>
</el-row>
</template>
</el-table-column>
<el-table-column align="right">
<template #default="prop">
<el-checkbox v-model="prop.row.isRead" label="Read" size="small" #change="updateCheckBox(prop.row.id)"/>
</template>
</el-table-column>
</el-table>
</template>
</div>
I am attempting to create a datatable where the user can filter the table using dropdown menus. The first dropdown menu "project_select" fills with all the unique values from a column of the data table. The second dropdown menu "hr_select" fills with values based on the user's selection from the "project_select" dropdown menu.
Currently, the dropdown menus are mapped to span elements in the html. I am looking to convert these span elements to select2.
This is my desired html code:
<label for="project_select"></label><select id="project_select" class="js-example-basic-single" style="width: 10%">
<option></option>
</select>
<label for="hr_select"></label><select id="hr_select" class="js-example-basic-multiple" multiple="multiple" style="width:15%">
<option></option>
</select>
However, when I try and replace the span elements with that desired HTML code.. it doesn't work.
This is my code: https://jsfiddle.net/dfahsjdahfsudaf/nL6q21g9/16/
Thanks in advance for any help!
I converted my comments to an answer for future visitors to this question:
The steps needed to convert your standard selects to "Select2" selects are:
Add the required libraries to the page:
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
Give IDs to each of the current <select> elements:
select = $('<select id="project_s2"><option value=""></option></select>');
and:
select = $('<select id="hr_s2" multiple><option value=""></option></select>');
Use those IDs to initialize Select2:
$('#project_s2').select2();
$('#hr_s2').select2();
The end result is:
var dataSet = [{
"Project_Name": "A",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "A",
"ID": "65",
"HR": "10",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "0",
},
{
"Project_Name": "B",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "20",
},
{
"Project_Name": "C",
"ID": "65",
"HR": "100",
},
];
$(document).ready(function() {
var table = $('#example').DataTable({
data: dataSet,
orderCellsTop: true,
columns: [{
data: "Project_Name"
},
{
data: "ID"
},
{
data: "HR"
}
],
initComplete: function() {
this.api().columns([0, 2]).every(function() {
var column = this;
var colIdx = column.index();
var node;
var select;
if (colIdx === 0) {
node = $('#project_select');
select = $('<select id="project_s2" style="width: 40%"><option value=""></option></select>');
} else {
node = $('#hr_select');
select = $('<select id="hr_s2" style="width: 20%" multiple><option value=""></option></select>');
}
select.appendTo($(node).empty())
.on('change', function() {
var val = $(this).val();
if (colIdx === 0) {
val = $.fn.dataTable.util.escapeRegex(val);
column.search(val ? '^' + val + '$' : '', true, false).draw();
rebuildPositionSelect();
} else {
var vals = val.map(x => $.fn.dataTable.util.escapeRegex(x)).join('|');
column.search(vals ? '^' + vals + '$' : '', true, false).draw();
}
});
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>')
});
});
$('#project_s2').select2();
$('#hr_s2').select2();
}
});
function rebuildPositionSelect() {
var select = $('#hr_select select').empty().append('<option value=""></option>');
var column = table.column(2, {
search: 'applied'
});
column.search('').draw();
column.data().unique().sort().each(function(val) {
select.append('<option value="' + val + '">' + val + '</option>');
});
}
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<div>
<span>Project: </span>
<span id="project_select"></span>
<span> HR: </span>
<span id="hr_select"></span>
</div>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Project_Name</th>
<th>ID</th>
<th>HR</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
As mentioned in the comments, this is a very basic set-up for each Select2 drop-down.
To customize them further you can provide options - for example:
$('#project_s2').select2( {
theme: "classic",
placeholder: 'Select an option'
} );
Final Note:
The use of basic <span> elements in the above example, only minimal layout/styling may be insufficient for your needs. So, you will probably want to provide CSS customizations which provide a better overall layout. But those changes should not affect your Select2 elements.
For example, adding in style="width: 40%" (as shown above) makes a difference - but that may not be what you want, in your specific case.
I want to access a property, defined in ready() of my Polymer element (as seen in the following code):
Polymer({
is: 'my-list',
ready: function() {
this.tasks = [{
"task": {
"name": "OTS",
"rules": [{"name": "rule 1", "id": "1"}]
}
}];
this.parseJson();
},
parseJson: function() {
this.taskname = JSON.parse(this.tasks.task.name); // errors here
}
});
But I am getting the following error:
Uncaught TypeError: Cannot read property 'name' of undefined
for this line:
JSON.parse(this.tasks.task.name);
How do I fix this?
this.tasks is an array of objects, but parseJson() is not using the correct syntax to access array elements.
parseJson() should be using this.tasks[0].task.name, assuming your actual code can have more than one task and that you're only interested in the first one. Also, you don't need to use JSON.parse(), since the task name is not a JSON string.
Here's a working demo:
Polymer({
is: 'my-list',
ready: function() {
this.tasks = [{
"task": {
"name": "Task1",
"rules": [{
"name": "rule 1",
"id": "1",
}]
}
}];
this.parseJson();
},
parseJson: function() {
this.taskname = this.tasks[0].task.name;
console.log(this.taskname);
}
});
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<my-list></my-list>
</body>
In my project I'm binding a list of 'paper-fab' elements from a JSON array.
I want to give only the name of the icon instead of the full path to bind with 'src' property of 'paper-fab'. How can I achieve this? Is it possible to do it with computed property? Thanks in advance.
The code snippet and JSON format is given below.
<ul id="actionButtons">
<template is="dom-repeat" items="[[plugins]]">
<li>
<span>
<paper-fab mini src="[[item.iconSrc]]" id="[[item.id]]" name="[[item.name]]" class$="[[item.cssClass]]"> </paper-fab>
</span>
</li>
</template> </ul>
JSON structure is given below
plugins:
[
{
"id": 1,
"name": "Image_1",
"iconSrc": "app/images/icons/pacs_pull.png",
"cssClass": "white"
},
{
"id": 2,
"name": "Image_2",
"iconSrc": "app/images/icons/pacs_push.png",
"cssClass": "grey"
},
{
"id": 3,
"name": "Image_3",
"iconSrc": "app/images/icons/fileBrowser.png",
"cssClass": "white",
}
]
Check out Computed bindings
<template>
My name is <span>{{computeFullName(first, last)}}</span>
</template>
<script>
Polymer({
is: 'x-custom',
properties: {
first: String,
last: String
},
computeFullName: function(first, last) {
return first + ' ' + last;
}
...
});
</script>
</dom-module>
You should be able to pass item.iconSrc to you compute to append the path to the icon
I was using polymer example and they used core-ajax to call the api.I want to display text from the openweathermap api.When i call the api it displays no data.I'm not able to display any data and when i placed console.log(this.post) in the post-list element it gives me undefined.I'm practically a noob when it comes to polymer.
Below is the Api Calling Method
<polymer-element name="post-service" attributes="posts">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
auto
url="http://api.openweathermap.org/data/2.5/weather?q=hyderabad"
on-core-response="{{postsLoaded}}"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('post-service', {
created: function() {
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
this.posts = this.$.ajax.response;
},
/**
* Update the service with the current favorite value.
* (Two-way data binding updates the favorite value
* stored locally.) If this was a real service, this
* method would do something useful.
*
* #method setFavorite
* #param uid {Number} Unique ID for post.
* #param isFavorite {Boolean} True if the user marked this post as a favorite.
*/
setFavorite: function(uid, isFavorite) {
// no service backend, just log the change
console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
}
});
</script>
</polymer-element>
This is element is used to display
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
</style>
<post-service id="service" posts="{{posts}}">
</post-service>
<div layout vertical center>
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
</div>
</template>
<script>
Polymer({});
console.log(this.post);
</script>
</polymer-element>
Example json
[
{
"uid": 1,
"text" : "Have you heard about the Web Components revolution?",
"username" : "Eric",
"avatar" : "../images/avatar-01.svg",
"favorite": false
},
{
"uid": 2,
"text" : "Loving this Polymer thing.",
"username" : "Rob",
"avatar" : "../images/avatar-02.svg",
"favorite": false
}
]
My api response(json)
{
"coord": {
"lon": 78.47,
"lat": 17.38
},
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"base": "cmc stations",
"main": {
"temp": 303.15,
"pressure": 1010,
"humidity": 62,
"temp_min": 303.15,
"temp_max": 303.15
},
"wind": {
"speed": 7.7,
"deg": 280
},
"clouds": {
"all": 40
},
"dt": 1436677800,
"sys": {
"type": 1,
"id": 7830,
"message": 0.0124,
"country": "IN",
"sunrise": 1436660330,
"sunset": 1436707470
},
"id": 1269843,
"name": "Hyderabad",
"cod": 200
}
The core-ajax element sends an event when the data are received. To use them you have to manipulate the fired event.
postsLoaded: function(event, detail) {
// Event contains lot of informations
console.log(event);
// Detail would be the received data
console.log(detail);
// Make a copy of the loaded data
this.posts = detail; // or this.posts = event.detail;
}
It would be easier to see what happens if you add a listener on the posts attributes in your element post-list. See the doc section Observing properties.
<script>
Polymer({
postsChanged: function(oldValue, newValue) {
console.log(newValue);
}
});
</script>
Moreover, I think you have a typo in your code. In the template you are using post and no posts :
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
Finally, if you are starting with Polymer, I suggest you to start with the version 1.0.