Skip to content

Instantly share code, notes, and snippets.

@alvarouribe

alvarouribe/polymer-action-and-hidden.html

Forked from anonymous/index.html
Last active May 23, 2016 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alvarouribe/5a6ebecd507acd02cdc4b9379971e6f4 to your computer and use it in GitHub Desktop.
Save alvarouribe/5a6ebecd507acd02cdc4b9379971e6f4 to your computer and use it in GitHub Desktop.
Download ZIP
polymer// source http://jsbin.com/boraquw
Raw
polymer-action-and-hidden.html
<!DOCTYPE html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<button on-click="_dosomething">show more</button>
<template is="dom-repeat" items="{{myItems}}" >
<p hidden$="{{_isItemHidden(item)}}">{{item}}</p>
</template>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
ready: function() {
this.myItems = [1,2,3,4,5];
},
_dosomething: function(){
console.log('I am doing something');
},
_isItemHidden: function(item) {
if (item == 5) return true;
return false;
}
});
});
</script>
Hide mambo number 5
<my-element></my-element>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"><\/script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<button on-click="_dosomething">show more</button>
<template is="dom-repeat" items="{{myItems}}" >
<p hidden$="{{_isItemHidden(item)}}">{{item}}</p>
</template>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
ready: function() {
this.myItems = [1,2,3,4,5];
},
_dosomething: function(){
console.log('I am doing something');
},
_isItemHidden: function(item) {
if (item == 5) return true;
return false;
}
});
});
<\/script>
Hide mambo number 5
<my-element></my-element>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment