Polymer. Usando Arrays en el modelo de datos del Componente Web


Muy buenas a tod@s.

Sigo profundizando en este framework de Javascript, con el objetivo de llegar a un conocimiento del mismo que me permita poder usarlo activamente en mis desarrollos en proyectos reales. En post anteriores de esta serie relacionada con Polymer, habíamos visto por un lado la estructura básica para definir un elemento, y por otro cómo usar CSS dentro del componente definido y cómo renderizar elementos dentro del mismo.

Introducción a Polymer. Mi primer componente web

Polymer: CSS y cómo renderizar elementos dentro del componente web

Hoy quiero mostrar cómo podríamos trabajar con un array dentro de nuestro modelo de datos del componente. Es muy sencillo, así que voy a pasar directamente a mostraros el código del componente y mostraros los aspectos importantes del mismo.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="example-posts">
	<template>
		<ul>
			<template repeat="{{post in posts}}">
				<li>
					<h2>{{post.title}}</h2>
					<p>{{post.body}}</p>
				</li>
			</template>
		</ul>
	</template>
	<script>
		Polymer({
			posts: [
				{title: 'Example post 1', body: 'This is the body of this post'},
				{title: 'Example post 2', body: 'This is the body of this post. The second of this array'},
				{title: 'Example post 3', body: 'This is the body of the last post'}
			]
		});
	</script>
</polymer-element>

El código, como os decía, por sí solo es muy sencillo, pero vamos a explicar los aspectos más importantes del mismo.

  • El atributo repeat del template, le dice a Polymer que tiene que crear un fragmento de código para cada elemento del array.
  • En el interior de ese template se establece cómo será el aspecto de ese fragmento.
  • Por medio de la expresión {{post.title}} o {{post.body}} se pueden acceder a las propiedades de los objetos del array.

El resultado de usar este componente en un proyecto web.

Captura de pantalla 2015-01-31 a las 17.25.03

Por supuesto podríamos mejorar este código y usar el concepto propio de Polymer de crear Componentes Web, para crear un componente web que representara a un post, y usarlo dentro del ejemplo anterior. Vamos a ver cómo sería este código, dónde se ve la creación del componente post y como se usa posteriormente.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="example-post" attributes="title body">
	<template>
		<li>
			<h2>{{title}}</h2>
			<p>{{body}}</p>
		</li>
	</template>
	<script>
		Polymer({
			title: '',
			body: ''
		});
	</script>
</polymer-element>

<polymer-element name="example-posts">
	<template>
		<ul>
			<template repeat="{{post in posts}}">
				<example-post title="{{post.title}}" body="{{post.body}}"></example-post>
			</template>
		</ul>
	</template>
	<script>
		Polymer({
			posts: [
				{title: 'Example post 1', body: 'This is the body of this post'},
				{title: 'Example post 2', body: 'This is the body of this post. The second of this array'},
				{title: 'Example post 3', body: 'This is the body of the last post'}
			]
		});
	</script>
</polymer-element>

Y esto es todo por hoy, con este post, completo ya por fin bastantes de los aspectos que quería trabajar de Polymer, ahora espero empezar a usar este framework de forma intensiva en mis proyectos webs, ya que en mi opinión ofrece muchas ventajas y aspectos interesantes a tener en cuenta.

Un saludo a todos

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s