template repeat in polymer 1.0 -
i've created test polymer element in figuring out how use use arrays in templates. code not work , documentation 1.0 doesn't talk how use repeat in template tags.
my element:
<!-- imports polymer --> <link rel="import" href="polymer/polymer.html"> <!-- defines element markup --> <dom-module id="my-element" > <template> <style> my-element </style> <h2>{{data}}</h2> <ul> <template repeat={{column in columns}} bind> <li>{{column}}</li> </template> </ul> </template> </dom-module> <!-- registers custom element --> <script> polymer({ is: 'my-element', // fires when instance of element created created: function() { }, // fires when local dom has been prepared ready: function() {}, // fires when element inserted document attached: function() {}, // fires when element removed document detached: function() {}, // fires when attribute added, removed, or updated attributechanged: function(name, type) { alert("changed"); }, properties:{ data :string, columns:array } }); </script> and index.html page i'm using element:
<!doctype html> <html> <head> <meta charset="utf-8"> <title><my-repo></title> <!-- imports polyfill --> <script src="webcomponents-lite.min.js"></script> <!-- imports custom element -->
<link rel="import" href="my-element.html">
<!-- runs custom element --> <my-element users = '{{[1,2,3,4]}}' data="this polymer table"></my-element>
please let me know what's wrong code!!
you have use
<template is="dom-repeat" items="{{users}}"> <li>{{item}}</li> </template> and in main file:
<my-element users="[1,2,3,4]" data="this polymer table"></my-element> you can search youtube polycast, series google developers they're talking polymer beginners , showing cool tricks.
Comments
Post a Comment