javascript - How to Use Polymer Elements -


I'm working through some demos in Polymer Here's one here:

The code looks like this:

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; Ajax this. & Lt; / Title & gt; & Lt; Script src = "../bower_components / platform / platform.js" & gt; & Lt; / Script & gt; & Lt; Link rel = "import" href = "../bower_components / polymer / polymer.html" & gt; & Lt; Link rel = "import" href = "../bower_components / core-ajax / core-ajax.html" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Core-ajax auto url = "http://gdata.youtube.com/feeds/api/videos/" params = '{alt alt :: "json", "q": "chrome"}' handles = 'json " & Gt; & lt; / core-ajax & gt; & lt; template repeat = "{{response.feed.entry}}"> 
{. {Title $ t}} & lt ; / Div & gt; & lt; / template & gt; & lt; script & gt; Document.addEventListener ('polymer-ready', function () {var ajax = document.query selector ("core-ajax"); AJAX.Edent LISTONER ("core-response", function (e) {document.querySelector ('template') .model = {feedback: e.detail.response};});}); & lt; / scripts & gt; ; & Lt; / body & gt; & lt; / html & gt;

That's fair enough But I must keep this demo inside a polymer element, which is called "test-element.html", but it does not work:

    

nothing is visible, And import it inside of my index.html:

  
  • DOCTYPE html> & gt; & lt; Meta Charset = "UTF-8" & gt; Title & gt; Javascript Playground & lt; / Title & gt; & Lt; Script src = "../bower_components / platform / platform.js" & gt; & Lt; / Script & gt; & Lt; Link rel = "import" href = "../bower_components / polymer / polymer.html" & gt; & Lt; Link rel = "import" href = "test-element.html" & gt; & Lt; Link rel = "import" href = "ajax-feedback.html" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Style & gt; * {Margin: 0; Padding: 0;} & lt; / Style & gt; & Lt; H1 & gt; Hello World & lt; / H1> & Lt; Test element & gt; & Lt; / Test-element & gt; & Lt; ajax-feedback & gt; & Lt; / Ajax-feedback & gt; & Lt; / Body & gt; & Lt; / Html & gt;

    Please explain to me, why can not I just put the demo code inside a polymer element and then import it again inside my index.html?

    Thank you very much.

    George.

    Two things: document.query selector () will not work here: using polymer elements shadow domain Which will hide the elements from CSS and query selector (), and you have done it in a difficult way. You can use & lt; Script & gt; inside the tag & lt; Templates & gt; should not be required, and you do not need a code code JS, so to say where it is

    This is the easiest way:

      lt; Link rel = "import" href = "/ bower_components / polymer / polymer.html" & gt; & Lt; Link rel = "import" href = "/ bower_components / core-ajax / core-ajax.html" & gt; & Lt; Polymer-element name = "test-element" attributes = "q" & gt; & Lt; Templates & gt; & Lt; Core-ajax auto url = "http://gdata.youtube.com/feeds/api/videos/" params = '{alt alt :: "json", "q": "{{q}}"}' handles = "Jason" response = "{{response}}" & gt; & Lt; / core-ajax & gt; & Lt; Repeat template = "{{response.feed.entry}}" & gt; & Lt; Div & gt; {. {Title $ T}} & lt; / Div & gt; & Lt; / Template & gt; & Lt; / Template & gt; & Lt; Script & gt; Polymer ({answer: zero,}); & Lt; / Script & gt; & Lt; / Polymer element & gt;   

    and then to use it:

      & lt; Test-element q = "chrome" & gt; & Lt; / test-element & gt;    

  • Comments

    Popular posts from this blog

    php - PDO bindParam() fatal error -

    logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

    java - Why my included JSP file won't get processed correctly? -