javascript - How to Use Polymer Elements -



javascript - How to Use Polymer Elements -

i working through demo in polymer. 1 here:

https://www.polymer-project.org/components/core-ajax/demo.html

the code works looks this:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ajax this.</title> <script src="../bower_components/platform/platform.js"></script> <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/core-ajax/core-ajax.html"> </head> <body> <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"chrome"}' handleas="json"></core-ajax> <template repeat="{{response.feed.entry}}"> <div>{{title.$t}}</div> </template> <script> document.addeventlistener('polymer-ready', function() { var ajax = document.queryselector("core-ajax"); ajax.addeventlistener("core-response", function(e) { document.queryselector('template').model = { response: e.detail.response }; } ); }); </script> </body> </html>

which works quite fine. want encapsulate demo within of polymer element, called "test-element.html", doesn't work:

<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/core-ajax/core-ajax.html"> <polymer-element name="test-element"> <template> <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"chrome"}' handleas="json"></core-ajax> <template repeat="{{response.feed.entry}}"> <div>{{title.$t}}</div> </template> <script> document.addeventlistener('polymer-ready', function() { var ajax = document.queryselector("core-ajax"); ajax.addeventlistener("core-response", function(e) { document.queryselector('template').model = { response: e.detail.response }; } ); }); </script> </template> <script> polymer('test-element', { }); </script> </polymer-element>

nothing beeing displayed, when utilize element , import in within index.html:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>javascript playground</title> <script src="../bower_components/platform/platform.js"></script> <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="test-element.html"> <link rel="import" href="ajax-feedback.html"> </head> <body> <style> * {margin: 0; padding: 0;} </style> <h1>hello world</h1> <test-element></test-element> <ajax-feedback></ajax-feedback> </body> </html>

please can explain me, why can't set code of demo within polymer element , reimport within index.html?

thank much.

george.

two things: document.queryselector() won't work here: polymer elements utilize shadow dom, hide elements css , queryselector(), , you've done hard way. shouldn't need <script> tags within <template>, , don't need hard code js carry response it's going used.

this easy way:

<link rel="import" href="/bower_components/polymer/polymer.html"> <link rel="import" href="/bower_components/core-ajax/core-ajax.html"> <polymer-element name="test-element" attributes="q"> <template> <core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"{{q}}"}' handleas="json" response="{{response}}"></core-ajax> <template repeat="{{response.feed.entry}}"> <div>{{title.$t}}</div> </template> </template> <script> polymer({ response: null, }); </script> </polymer-element>

and utilize it:

<test-element q="chrome"></test-element>

javascript polymer

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

java - Bypassing "final local variable defined in an enclosing type" -

java - Bypassing "final local variable defined in an enclosing type" - i'm writing programme , i'm getting "the final local variable asd cannot assigned, since it's defined in enclosing type". i provide illustration not code produces error aswell. have arraylist utilize later (if define within button can't utilize later on), outside of button, pressing button should give values arraylist. in illustration "create new arraylist" cause same problem. button btn = new button("asd"); final arraylist asd = new arraylist(); btn.setonaction(new eventhandler<actionevent>() { public void handle(final actionevent event) { asd = new arraylist(); //here's error.. } }); clear arraylist , add together values. java javafx
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more