Polymer app-router problems - javascript

Hopefully somebody can help me better understanding using app-router with Polymer. I have the following files - index.html, app.html and updates.html.
Everything is working as it should with the main layout appearing when I navigate to the root of the domain but nothing appears in the content area where I am trying to render the contents of the updates.html file using the app-router element.
Any help is much appreciated
index.html
<html>
<head>
<title>Example App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/app.html">
</head>
<body fullbleed unresolved>
<example-app></example-app>
</body>
</html>
app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/app-router/app-router.html">
<polymer-element name="example-app">
<template>
<core-scaffold id="scaffoldPanel">
<core-header-panel navigation flex>
<core-toolbar id="navheader" class="tall">
<img class="middle profile" src="../images/main-carer.png">
</core-toolbar>
</core-header-panel>
<core-toolbar tool flex>
<div id="main-title" flex>Example App</div>
<core-icon icon="search"></core-icon>
</core-toolbar>
<div class="content">
<app-router>
<app-route path="/" import="elements/updates.html" element="app-updates"></app-route>
</app-router>
</div>
</core-scaffold>
</template>
</polymer-element>
updates.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-updates">
<template>
<div vertical layout style="height:50px;">
<div flex class="home-update-menu"><h4>UPDATES</h4></div>
</div>
<div>Updates appear here</div>
</template>
</polymer-element>

Related

Can't fire iron-select event on paper-listbox

I am trying to fire a simple listen function on an iron-select event based on the selection of a value in a paper-dropdown-menu.
Here is my HTML's head
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script src="./js/app.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>
My HTML's body
<div class="assign-country">
<paper-dropdown-menu on-iron-select="listen" label="Country">
<paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item>France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
And my JS function
function listen () {
console.log('coucou');
}

The on-EVENTNAME="METHODNAME" is Polymer-specific syntax to setup an annotated event listener, but these annotations only work inside a Polymer template (inside a <dom-module> or <dom-bind>).
Given the example code and your intention to avoid Polymer syntax, you should setup the event listeners manually with a reference to the element. The same iron-select event fires on both <paper-dropdown-menu> and the inner <paper-listbox>, so you only need to listen to the iron-select event on one of them. Here's one solution:
Assign an ID to <paper-dropdown-menu> so that it can easily be referenced in JavaScript (with Document.getElementById()).
<paper-dropdown-menu id="mydropdown">
Add an event listener (with EventTarget.addEventListener()) to the <paper-dropdown-menu> reference:
const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));
const dropdown = document.getElementById('mydropdown');
dropdown.addEventListener('iron-select', e => listen(e));
function listen(e) {
console.log('iron-select', e);
document.getElementById('output').innerText = e.detail.item.innerText;
}
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<paper-dropdown-menu id="mydropdown" label="Country">
<paper-listbox slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item>France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<pre id="output"></pre>
</body>

Not too sure if it is what you are trying to achieve:
$('paper-item').click(function(){
console.log($(this).text());
})
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/scss" href="./main.scss" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/neon-animation.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/neon-animation/web-animations.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-dropdown-menu/paper-dropdown-menu.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-item/paper-item.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-listbox/paper-listbox.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/paper-input/paper-input.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icon/iron-icon.html"/>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-icons/iron-icons.html"/>
</head>
<div class="assign-country">
<paper-dropdown-menu on-iron-select="listen" label="Country">
<paper-listbox on-iron-select="listen" slot="dropdown-content" class="dropdown-content" selected="1">
<paper-item name="france">France</paper-item>
<paper-item>Germany</paper-item>
<paper-item>Spain</paper-item>
<paper-item>England</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>

Cannot read property 'childNodes' of undefined in angularjs with polymer

I'm getting the following error when rendering polymer templates from inside angularjs view.
$scope.descriptions is populated through a http GET request as following:
$http.get('http://api.fundsofhope.org/projects/all').success(function(data) {
$scope.descriptions = data;
})
And here is the template, which shows the error.
<div id="cards" ng-repeat="items in descriptions">
<div class="card-wrap">
<paper-card id="paper-card" heading="{{items.title}}" image="../images/1.jpg" elevation="1" ng-click="play(items)">
<paper-fab class="paper-fab" icon="home" elevation="1" ng-click="donationPage(items)"></paper-fab>
<p class="cardDetail">
{{items.description}}
</p>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="scale-down-animation">
<div id="image">
<img src="../images/1.jpg">
</div>
<div id="dialogContent">
<h2 class="dialogInfo" id="dialogName">
{{items.ngo.name}}
</h2>
<h2 class="dialogInfo" id="dialogCost">
{{"Cost : " + items.cost}}
</h2>
<h2 id="dialogStatus" class="dialogInfo">
{{"STATUS : " + items.status}}
</h2>
<h2 id="dialogStart" class="dialogInfo">
{{items.startDate}}
</h2>
<h2 id="dialogEnd" class="dialogInfo">
{{items.endDate}}
</h2>
<div class="descriptionBox">
<p class="dialogInfo" id="dialogDetails" maxLength="50">
{{items.description}}
</p>
</div>
</div>
</paper-dialog>
<paper-progress value="50" ></paper-progress>
<paper-progress value="{{items.status / items.cost}}" ></paper-progress>
</paper-card>
</div>
</div>
Surprisingly, this error is encountered only in Chrome (v52). While in Firefox and Microsoft Edge, this error is not thrown but Polymer does not render at all!
Here is the Angular's base template which has the polymer components included:
<head>
<title>fundsofhope</title>
<meta charset="utf-8">
<meta name="google-signin-client_id" content="1095141978516-uqea8udtat0463k3ukomrj1obouacggv.apps.googleusercontent.com">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="../angularJS/angular-route.min.js"></script>
<script type="text/javascript" src = "//connect.facebook.net/en_US/sdk.js";></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<script type="text/javascript" src="../customScripts/mainController.js"></script>
<script type="text/javascript" src="../customScripts/dataController.js"></script>
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-down-animation.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link href="../src/home.html">
<link href="../src/loading.html">
<link href="../src/paperCardList.html">
<link href="../src/donationPage.html">
<link rel="stylesheet" type="text/css" href="../styleSheets/sheet.css">
</head>
<body>
<div class="indexDiv1" ng-view></div>
</body>
Any help would be appreciated. Thanks!

Firefox 35.0a2 displays nothing when working with polymer 0.4.2

Firefox goes as far as the then it keeps "loading" but does not load any component or anything at all.
<!doctype html>
<html>
<head>
<title class="titulo"></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="http://www.polymer-project.org/components/core-ajax/core-ajax.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-viva/core-viva-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-submenu.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-fab/paper-fab.html">
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="pagina.js"></script>
<link rel="stylesheet" href="pagina.css">
</head>
<body fullbleed>
<core-ajax url="" handleAs="json"></core-ajax>
<core-drawer-panel drawerWidth="320px" >
<core-header-panel drawer mode="standard" >
<paper-shadow z="2">
<core-toolbar id="topo-do-menu-lateral" class="medium-tall" >
<div id="toolbar-content"></div>
</core-toolbar>
<core-menu class="menulateral" id="menulateral" z="1" selected="0"></core-menu>
</paper-shadow>
</core-header-panel>
<core-header-panel id="main-content-header-panel" mode="waterfall" class="" main>
<!-- topo com título -->
<core-toolbar id="topo-do-titulo" class="medium-tall middleJustify">
<paper-icon-button id="navicon" icon="menu" class="middle"></paper-icon-button>
<div id="titulo" class="indent middle" flex></div>
<paper-fab id="viva-close-button" icon="close" class="middle"></paper-fab>
<paper-shadow z="1"></paper-shadow>
</core-toolbar>
<div id="conteudo" class="indent" flex vertical layout center>
<responsive-embed id="responsiveEmbedContent">
</responsive-embed>
</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
Its all i have besides the style.css (which i can attach if you think it might help, i even copied all imports to the index.html because FF was blabing about it.
Hope someone can help me.

I believe it has something to do with Firefox same-origin policy for Ajax calls.
Have you tried setting up a web server on your localhost to serve index.html?

doing the javascript/angular part with Polymer

so i just found out about polymer and it looks realy cool but the thing is i couldn't figure out if its using javascript or its own unique language.
so what script language polymer using? i like angular and i saw that polymer script is like angular script so i didn't realized if im suppose to use javascript angular or polymer script...
yo-greeting file:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="yo-greeting" attributes="">
<template>
<style>
/* styles for the custom element itself - lowest specificity */
:host { display: block; }
/*
style if an ancestor has the different class
:host-context(.different) { }
*/
.imgWidth {
width: 100%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<img src="../images/lion.jpg" alt="" class="imgWidth" />
<paper-tabs selected="{{selectedPage}}">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<core-pages selected="{{selectedPage}}">
<div class="red_tab">One</div>
<div class="blue_tab">Two</div>
<div class="black_tab">Three</div>
</core-pages>
</template>
<script>
Polymer({
selectedPage: 1
});
</script>
</polymer-element>
index file:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-media-query/core-media-query.html">
<link rel="import" href="bower_components/core-list/core-list.html">
<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="bower_components/core-selector/core-selector.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<!-- endbuild-->
</head>
<body unresolved>
<div class="hero-unit">
<yo-greeting></yo-greeting>
<!-- <p>You now have</p>
<yo-list></yo-list> -->
</div>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
elements file:
<link rel="import" href="yo-list.html">
<link rel="import" href="yo-greeting.html">
i want that when i press on one of these tabs the core-pages will switch using polymer.
how do i do that the best way possible?
also - why my core-pages is not like that demo in the polymer site - http://www.polymer-project.org/docs/elements/core-elements.html#core-pages?
i installed it using bower and linked it just like the i linked the paper-tabs. its just showing one and does not switch when pressed.
thanks for all your help.

First of all there is no such thing as "Polymer Script". You write the code for your custom components in a language like JavaScript or Dart (or CoffeeScript or TypeScript or...)
There is a concept called "Polymer Expressions", which is the syntax inside the mustache ({{ }}) binding expressions. This is a subset of the JavaScript language with some additions like filters and they are similar to the AngularJS binding expressions.
To switch between the pages with your tabs, simply set up a binding between the selected properties of these elements. Currently you are setting the selected attribute of <core-pages> to 0, but nothing is changing it later on.
<polymer-element name="yo-greeting">
<template>
...
<paper-tabs selected="{{selectedPage}}">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
<core-pages selected="{{selectedPage}}">
<div class="red_tab">One</div>
<div class="blue_tab">Two</div>
<div class="black_tab">Three</div>
</core-pages>
</template>
<script>
Polymer('yo-greeting', {
selectedPage: 0
});
</script>
</polymer-element>
Whenever the tab selection changes this automagically updates the selected core page. This is done by binding the selected attributes to the selectedPage property of the yo-greeting element.

Ajax request data passing between components

I am trying to get the reddit topic results from AJAX request and it seems my current approach of passing the posts results is wrong.
Currently I have created three web components, separate service for the ajax requests which passes the response via attribute.
Separate search component which has text input field changes the category for the 'service'.
The search component pass the posts to listing service.
The problem is with the passing posts data from search component to list component.
reddit-post-service.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-ajax/core-ajax.html">
<polymer-element name="reddit-post-service" attributes="posts subreddit">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
url="http://www.reddit.com/r/{{subreddit}}/new.json"
on-core-response="{{postsLoaded}}"
on-core-error="{{handleError}}"
auto
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('reddit-post-service', {
created: function() {
console.log('Reddit post service created');
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
this.posts = this.$.ajax.response.data.children
.map(function (post) {
return post.data;
});
},
handleError: function () {
this.posts = [];
}
});
</script>
</polymer-element>
reddit-search.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-input/paper-input.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="reddit-post-service.html">
<polymer-element name="reddit-search" attributes="posts">
<template>
<style>
paper-button.search {
background-color: #19D820;
}
</style>
<paper-input label="subreddit name" tabindex="0" value="{{subreddit}}"></paper-input>
<paper-button label="Search" tabindex="1" class="search"></paper-button>
<reddit-post-service subreddit="{{subreddit}}" posts="{{posts}}"></reddit-post-service>
</template>
<script>
Polymer('reddit-search', {
subreddit: 'programming',
// initialize the element's model
ready: function() {
}
});
</script>
</polymer-element>
post-list.html
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">
<polymer-element name="post-list" attributes="show posts">
<template>
<style>
:host {
display: block;
width: 100%;
}
</style>
<div layout vertical center>
<template repeat="{{post in posts}}">
<!-- Never reach this block -->
<span>{{post}}</span>
</template>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
index.html
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-list.html">
<link rel="import" href="reddit-search.html">
<link rel="import" href="name-tag.html">
<style>
</head>
<body unresolved>
<core-header-panel>
<core-toolbar>
<paper-tabs valueattr="name" selected="new" self-end>
<paper-tab name="new">NEW</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
<reddit-search posts="{{posts}}"></reddit-search>
</core-toolbar>
<!-- <name-tag></name-tag> -->
<!-- main page content will go here -->
<div class="container" layout vertical center>
<post-list show="all" posts="{{posts}}"></post-list>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>

Data-binding via '{{ }}' only works in the context of a template. Your index.html attempts to use binding outside of a template.
You can fix this by making your main application itself a polymer-element, by using some other system for propagating the data, or by using an auto-binding template, like this:
<template is="auto-binding">
<core-header-panel flex>
<core-toolbar>
<paper-tabs valueattr="name" selected="new" self-end>
<paper-tab name="new">NEW</paper-tab>
<paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs>
<reddit-search posts="{{posts}}"></reddit-search>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all" posts="{{posts}}"></post-list>
</div>
</core-header-panel>
</template>
See http://jsbin.com/xahoc/2/edit

Categories

Resources