Radamantis Torres
Support Manager Appcelerator
@Radamantis
Polymer HTML Includes y AJAX
Introducción
● Web Developer/Architect
● Mobile Developer/Architect
● Linux Sysadmin
Quick conf
● Nginx server block
● Hosts file
● Ready
HTML Imports
● Casi no encontré documentación
● HTML5 puro
● No está soportado en todos los browsers
● Webcomponents!
Import
● <link rel="import" href="/internals/current.html">
Muy bien, pero esto no me funciona si quiero agregar mas de un...
● La clave está en agregar id's
ImportImportImport
<link rel="import" href="/internals/current.html" id="currentIm">
<link...
● HTMLImportsLoaded
● WebComponentsReady
EventListeners
Guardando la info
var linkCurrent = document.getElementById('currentIm');
contentCurrent = linkCurrent.import.querySelecto...
Webcomponents
● Is a collection of libraries (or “polyfills”) for new
web technologies that haven’t shipped yet
across all...
Polymer components
● Finalmente agregamos algunos components
● Creamos un esqueleto
● Ajustamos detalles
Finalmente
Ajax calls
● Todos necesitamos las ajax calls
● Se pueden hacer sin script
core-ajax
<core-ajax
auto
url="http://www.filltext.com/"
params='{"rows":10, "firstName":"{firstName}",
"lastName":"{lastN...
Finalmente
Polymer, HTML includes y core-ajax
of 15

Polymer, HTML includes y core-ajax

Introducción al uso de html imports en polymer y como usar core-ajax sin código javascript
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Polymer, HTML includes y core-ajax

  • 1. Radamantis Torres Support Manager Appcelerator @Radamantis Polymer HTML Includes y AJAX
  • 2. Introducción ● Web Developer/Architect ● Mobile Developer/Architect ● Linux Sysadmin
  • 3. Quick conf ● Nginx server block ● Hosts file ● Ready
  • 4. HTML Imports ● Casi no encontré documentación ● HTML5 puro ● No está soportado en todos los browsers ● Webcomponents!
  • 5. Import ● <link rel="import" href="/internals/current.html"> Muy bien, pero esto no me funciona si quiero agregar mas de uno!
  • 6. ● La clave está en agregar id's ImportImportImport <link rel="import" href="/internals/current.html" id="currentIm"> <link rel="import" href="/internals/experience.html" id="expIm"> <link rel="import" href="/internals/skills.html" id="skillsIm">
  • 7. ● HTMLImportsLoaded ● WebComponentsReady EventListeners
  • 8. Guardando la info var linkCurrent = document.getElementById('currentIm'); contentCurrent = linkCurrent.import.querySelector('#current'); main.appendChild(document.importNode(contentCurrent, true));
  • 9. Webcomponents ● Is a collection of libraries (or “polyfills”) for new web technologies that haven’t shipped yet across all browsers ● Webcomponents.org
  • 10. Polymer components ● Finalmente agregamos algunos components ● Creamos un esqueleto ● Ajustamos detalles
  • 11. Finalmente
  • 12. Ajax calls ● Todos necesitamos las ajax calls ● Se pueden hacer sin script
  • 13. core-ajax <core-ajax auto url="http://www.filltext.com/" params='{"rows":10, "firstName":"{firstName}", "lastName":"{lastName}"}' handleAs="json" response={{people}} ></core-ajax>
  • 14. Finalmente

Related Documents