I have a custom element called "datasource.html" which loads a json using iron-ajax. Now, I want to use the JSON data into "app.html" and eventually into "categories.html"
Then in app.html, I want to use this same value of myattr and transfer the same to categories.html.
Now, datasource.html prints the data on screen but categories.html shows nothing on the page.
What I want is that I load data in datasource.html once and then use the data anywhere in the project.
Trying to figure this out for last 2 days. Still got nothing.
Thanks in advance.
Here is my index.html file
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="lgelements/datasource.html">
<link rel="import" href="lgelements/app.html">
</head>
<body>
<dom-module id="landing-page" attributes="myattr">
<template>
<lg-datasource myattr="{{myattr}}"></lg-datasource>
<lg-app myattr="{{myattr}}"></lg-app>
</template>
</dom-module>
<script>
Polymer({
is: "landing-page",
});
</script>
<landing-page></landing-page>
</body>
</html>
Here is datasource.html
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="lg-datasource" attributes="myattr" hidden>
<template>
<iron-ajax url="../data.json" auto handleAs="json" last-response="{{myattr}}"></iron-ajax>
<template is="dom-repeat" items="[[myattr]]">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-datasource",
});
</script>
Here is my app.html
<link rel="import" href="categories.html">
<dom-module id="lg-app" attributes="myattr" vertical layout>
<template is="auto-binding">
<h1>[[myAttr]]</h1>
<lg-categories myattr="{{myattr}}"></lg-categories>
</template>
</dom-module>
<script>
Polymer({
is: "lg-app",
});
</script>
And here is categories.html
<dom-module id="lg-categories" attributes="myattr">
<template is="auto-binding">
<h2>MY NAME IS MANIK</h2>
<template is="dom-repeat" items="{{myattr}}">
<a href="[[item.url]]" target="_blank">
<h1>[[item.name]]</h1>
</a>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "lg-categories",
});
</script>
Use double curly brackets {{}} when you use the item inside the element with is="dom-repeat". So change it to:
<template is="dom-repeat" items="{{myattr}}">
<a href="{{item.url}}" target="_blank">
<h1>{{item.name}}</h1>
</a>
</template>
Also you should expose the myattr as a property and remove the template in datasource.html file.
Polymer({
is: "lg-datasource",
properties : {
myattr : Array
}
});
I have only skimmed your code, but I had the same kind of problem,... a child element that was the datasource and the parent that was supposed to display it. To get the data binding to work I needed to call _setPropertyName(data) in the child. Can't seem to find where this is documented but that's how its done internally in iron-ajax (look at the "loading" property).
Related
I am cutting my project into several templates. I have a drawer (<app-drawer> from the app-layout package), and I decided to make a template out of it. I would like to open or toggle the drawer with a button in the main template. I tried to use data binding for that, but the drawer doesn't appear.
Here is the minimal code of the main window:
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="test-drawer.html">
<dom-module id="test-window">
<template>
<app-header reveals>
<app-toolbar>
<paper-button on-tap="togglemenu">Test</paper-button>
</app-toolbar>
</app-header>
<test-drawer drawerOpened="{{drawerOpened}}"></test-drawer>
</template>
<script>
Polymer({
is: "test-window",
togglemenu: function() {
alert('test')
this.drawerOpened = !this.drawerOpened;
},
})
</script>
</dom-module>
Here is the minimal code of the drawer:
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<dom-module id="test-drawer">
<template>
<app-drawer id="drawermenu" opened="{{drawerOpened}}" swipe-open>
<paper-menu selected="{{menuSelected}}" attr-for-selected="name">
<paper-item name="item1">Item1</paper-item>
<paper-item name="item2">Item2</paper-item>
<paper-item name="item3">Item3</paper-item>
</paper-menu>
</app-drawer>
</template>
<script>
Polymer({
is: "test-drawer",
properties: {
drawerOpened: Boolean,
},
})
</script>
</dom-module>
I know the callback runs because the alert box shows up.
What am I doing wrong here?
Your property is named drawerOpened, which is mapped to dash-case (i.e., drawer-opened) for data binding, so change this:
<test-drawer drawerOpened="{{drawerOpened}}"></test-drawer>
to:
<test-drawer drawer-opened="{{drawerOpened}}"></test-drawer>
HTMLImports.whenReady(() => {
Polymer({
is: 'test-drawer',
properties: {
drawerOpened: {
type: Boolean,
notify: true
}
}
});
Polymer({
is: 'test-window',
togglemenu: function() {
this.drawerOpened = !this.drawerOpened;
},
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="app-layout/app-layout.html">
<link rel="import" href="paper-menu/paper-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<test-window></test-window>
<dom-module id="test-drawer">
<template>
<app-drawer id="drawermenu" opened="{{drawerOpened}}" swipe-open>
<paper-menu selected="{{menuSelected}}" attr-for-selected="name">
<paper-item name="item1">Item1</paper-item>
<paper-item name="item2">Item2</paper-item>
<paper-item name="item3">Item3</paper-item>
</paper-menu>
</app-drawer>
</template>
</dom-module>
<dom-module id="test-window">
<template>
<style>
app-header {
background: #47cf73;
}
</style>
<app-header reveals>
<app-toolbar>
<paper-button on-tap="togglemenu">Test</paper-button>
</app-toolbar>
</app-header>
<test-drawer drawer-opened="{{drawerOpened}}"></test-drawer>
</template>
</dom-module>
</body>
codepen
I'm a bit lost on how to implement the firebase-auth element. Any examples would be appreciated, I haven't managed to find any yet.
Thanks
On this question, Glenn Vandeuren posts the following:
Element
<!--
#license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<dom-module id="login-button">
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<template>
<paper-button raised>Login using <span>[[service]]</span></paper-button>
</template>
</dom-module>
<script>
Polymer({
is: 'login-button',
properties: {
service: String
},
listeners: {
'tap': '_handleTap'
},
_handleTap: function () {
this.fire('login', this.service);
}
});
</script>
Index
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>login-button Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../login-button.html">
</head>
<body>
<login-button service="google"></login-button>
<login-button service="twitter"></login-button>
<script>
document.addEventListener('login', function(service) {
// handleLogin();
alert(service.detail);
});
</script>
</body>
</html>
I ended up getting auth to work by adapting this example element by HackITtoday for my firebase urls. It's as simple as adding the element like:
<hi9-login></hi9-login>
I'm playing with Polymer 1.0 by creating a simple custom-element (ui-button).
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<dom-module id="ui-button">
<link rel="import" type="css" href="ui-button.css">
<template>
<button class="ui button">
<template is="dom-if" if="{{icon}}"><i class="icon">1</i></template>
<template is="dom-if" if="{{label}}">{{label}}</template>
</button>
</template>
</dom-module>
<script src="ui-button.js"></script>
Everything works fine in Chrome, but in Firefox the button has no styling.
My guess is that the problem is the external stylesheet, because when i put the CSS inline (style-tag)...it works.
Is this a bug in Polymer 1.0?
I really want to use the external stylesheet...
This is working for me in both Chrome and Firefox. This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheet.css">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/app/general/your-element.html">
</head>
<body>
<your-element></your-element>
</body>
</html>
Inside the element, I'm using the css class / id references just like you would on any regular html tag. So, inside of your-element looks something like this:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="your-element">
<template>
<span class="some_class_style">Hey, I'm stylish!</span>
</template>
<script>
Polymer({
is: 'your-element',
...
});
</script>
</dom-module>
And, it's styled by whatever you defined for some_class_style. Keep in mind, I've only made elements that are one level deep (ie. no children elements), but it seems to be working fine.
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.
Hi I'm trying to load conditionlly an external css file in my polymer but is not working
the code:
<polymer-element name="my-polymer-component" attributes="query">
<template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component.css"/>
</template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component2.css"/>
</template>
<section class="container">
<div class="headerImportText">
<span>
hello world
</span>
</div>
<section>
<template>
<script>
Polymer({
});
</script>
</polymer-element>
I need to changed the UI of the component by the condition.
As far as I know, you cannot do declarative conditional CSS loading in the template,
you must do your conditional CSS loading programmatically.
Here you have a sample: http://plnkr.co/edit/8Oavqpbh8eJTTKLw13bL?p=preview
Relevant part of the code:
<polymer-element name="my-polymer-component" attributes="condition">
<template>
<h1>Condition: {{condition}}</h1>
<section class="container">
<content> </content>
</section>
</template>
<script>
Polymer({
domReady: function() {
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", this.condition+".css")
console.log(fileref)
this.appendChild(fileref)
console.log("domReady!")
}
});
</script>
</polymer-element>
<h1>Here you have a sample</h1>
<my-polymer-component condition="a">
</my-polymer-component>
Hope it helps!