|
<!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> |
