I am trying to get auto binding template to work with out success. This is what I have done so far. The page doesn't render with the value of "greeting" . It outputs {{greeting}}.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<template is="dom-bind" id="app" >
<span> {{greeting}} </span>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
app.js
(function(document) {
'use strict';
var app = document.querySelector('#app');
app.greeting = "Hello";
})(document);
It works with Polymer 0.5.5 http://plnkr.co/edit/fmL9xQEXKwnINzdL3rBj?p=preview
Your {{greeting}} binding must be the only content of a tag (Polymer documentation: Binding to text content). You need to remove the surrounding whitespace:
<template is="dom-bind" id="app" >
<span>{{greeting}}</span>
</template>
Related
I'm trying to use INK's sticky js module to work. For some reason, it's just not. I also notice that if I take that <div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
back out of my react component (and of course changing className to class) and past that directly in my index.html, the sticky works fine.
http://ink.sapo.pt/javascript-ui/#InkUISticky_1
My React Component:
const Content = Component({
render(){
var company = this.props.company;
return (
<div className='content padding-bottom-200 margin-top-50'>
<div className="column-group">
<div className="all-20">
<div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
</div>
<div className="all-80">
</div>
</div>
</div>
)
}
})
export default Content;
When the page renders, I see that the ink-alert has styled my div but the ink-sticky is doing nothing. I have included the js in my index.html as so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
This does work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div class="ink-sticky">
<div class="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
It probably has to do with the fact that, to make elements sticky, ink-sticky calls some JS to achieve that. Now, when the page just renders, it tries to find sticky elements by class name and automatically make them that, however your sticky elements are not in the HTML. They are dynamically added into the DOM.
Which means, you have to tell ink to make a certain element sticky, manually.
The most appropriate place to do that is in the componentDidMount lifecycle hook.
As far as I can see, Ink does have an API for making elements sticky: http://ink.sapo.pt/javascript/Ink.UI.Sticky/
Ideally, that behavior should be encapsulated into a component of its own:
const Sticky = React.createClass({
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
new Ink.UI.Sticky(el);
},
render() {
return <div>{this.props.children}</div>
}
});
This approach is what's used to bridge other UI libraries with React, not just this one. It can be used for jQuery UI and plugins, and so on, as well.
I'm running windows 7 with Firefox 43.0.1 and Chrome 47.0.2526.106 m
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
and the component is
<dom-module id="hello-world">
<template>
<h1>Hello, User</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
Chrome refuses to render. Firefox has no probs.
I installed polymer by typing bower install polymer at the command line. bower.json says it's version 1.2.3
Try importing Polymer Library in the component's file like shown below,
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
Component
<link rel="import" href="bower_components/polymer/polymer.html" />
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Polymer tutorial</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="./hello-world.html" />
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="./bower_components/polymer/polymer.html" />
<dom-module id="hello-world">
<template>
<h1>Hello, User</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
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.
I'm trying to use paper-tabs inside new element (tabs-list) but after print tabs I can't use querySelector to change selected one.
Element code (without style):
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../sprint-service/sprint-service.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<polymer-element name="tab-list" attributes="show">
<template>
<sprint-service id="service" sprints="{{sprints}}"></sprint-service>
<paper-tabs selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab>
<template repeat="{{sprint in sprints}}">
<paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer('tab-list', {
ready: function() {
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
})
}
});
</script>
</polymer-element>
Index.html code (whitout style):
<!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-dev/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="tab-list.html">
<link rel="import" href="post-list.html">
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<tab-list></tab-list>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
</div>
</core-header-panel>
<script>
var list = document.querySelector('post-list');
</script>
</body>
</html>
But
querySelector('paper-tabs') = *null*
I've tried to put the eventListener in index.html but I have the same problem.
can anyone tell me where the problem is?
Thank you very much!
document.querySelector('paper-tabs');
doesn't find the paper-tabs element, because it is hidden inside the shadow DOM of the tab-list element.
You can simply give paper-tabs an id, say tabs, and access it like so
this.$.tabs
(See http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding.)
There is also the option to access the shadow DOM directly
this.shadowRoot.querySelector('paper-tabs');
If you only want to listen for changes on the paper-tabs selection, you can use a change watcher:
<paper-tabs selected="{{currentTab}}">
Polymer('tab-list', {
currentTab: 'all',
currentTabChanged: function() {
console.log(this.currentTab);
}
});
(See http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers)
<template is="dom-repeat" items="{{dataobject}}">
<div on-tap="_showdetail">
<iron-collapse id="collapse">??</iron-collapse>
</div>
</template>
And to toggle the iron-collapse elements inside the dom-repeat I use
_showdetail: function(e){
Polymer.dom(e.currentTarget).querySelector('#collapse').toggle();
},
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