I'm struggling having to migrate a custom element that used a recursive template binding in Polymer 0.5. The custom element's HTML code was like:
<template>
<template bind="{{ items }}" id="t">
<section id="{{ id }}" appName="{{ id }}">
<template ref="t" repeat="{{ children }}"></template>
</section>
</template>
</template>
How could I write the same construct in Polymer 0.9? if the feature is not supported yet, are there plans to include it in Polymer's future versions?
Thanks
You can include a custom element inside of itself:
my-recursive.html
<link rel="import" href="../polymer/polymer.html">
<dom-module id="my-recursive">
<template>
<template is="dom-repeat" items="{{data}}">
<section id="{{item.id}}" appName="{{item.id}}">
<my-recursive data="{{item.children}}"></my-recursive>
</section>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'my-recursive'
});
</script>
index.html
<my-recursive
data='[{"id":1,"name":"top1","children":[{"id":3,"name":"mid1","children":[]},{"id":5,"name":"mid3","children":[]}]},{"id":2,"name":"top2","children":[{"id":4,"name":"mid2","children":[]}]}]'
></my-recursive>
Related
In a regular php web page I would include Vue.js via cdn and my component like this:
<!--Load Vue-->
<script src="https://unpkg.com/vue"></script>
<!--Load the web component polyfill-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="./my-custom-element.js"></script>
<!--Use my custom element-->
<my-custom-element msg="Hello..."></my-custom-element>
Is this somehow possible in a Wordpress site?
You just need to provide a div element with an id for Vue to use:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
Vue.component('MyButton',{
template:'<button><slot></slot></button>'
})
new Vue({
el: '#app',
data : ()=>({
items : ['a','b','c'],
}),
template: `<div>
<my-button v-for="i in items" :key="i">{{i}}</my-button>
</div>`
})
</script>
https://jsfiddle.net/ellisdod/2yn7metj/
Description
My goal is to use the polymerfire element to send a request to a Firebase endpoint to detect if there is data there and, if so, its content.
Please include in your answer a working demo if possible and extra points if you point to some good documentation as the current documentation is insufficient.
Expected outcome
I expect the demo page to look like:
CLICK ME
ornithischia
foo bar baz
And when the CLICK ME button is pressed, the following to appear in the console:
"You clicked me!"
"triceratops"
"{appeared: -68000000, height: 3, length: 8, order: "ornithischia", vanished: -66000000, weight: 11000}"
Actual outcome
The the demo page looks like:
CLICK ME
foo bar baz
And when the CLICK ME button is pressed, the following actually appears in the console:
"You clicked me!"
"triceratops"
"{}"
Live Demo
http://jsbin.com/fasovaxonu/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!-- Source: https://github.com/Download/polymer-cdn -->
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymerfire/polymerfire.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<firebase-app name="my-app"
auth-domain="dinosaur-facts.firebaseapp.com"
database-url="https://dinosaur-facts.firebaseio.com/"
>
</firebase-app>
<p>
<paper-button on-tap="_onTap">Click Me</paper-button>
</p>
<!---->
<firebase-query
app-name="my-app"
path="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"
>
</firebase-query>
<firebase-document
app-name="my-app"
path="https://dinosaur-facts.firebaseio.com/dinosaurs/triceratops"
data="{{triceratops}}"
>
</firebase-document>
[[triceratops.order]]
<br /><br />
<template is="dom-repeat" items="[[dinosaurs]]">
[[item.order]]
</template>
<template is="dom-repeat" items="[[test]]">
[[item]]
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
dinosaurs: Array,
test: {
value: function() {
return ['foo', 'bar', 'baz'];
}
},
},
_onTap: function() {
console.log('You clicked me!');
console.log('triceratops', JSON.stringify(this.triceratops));
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
You first need to include <firebase-app> to initialize firebase.
<firebase-app
database-url="dinos-89701.firebaseio.com"
api-key="AIzaSyDLkCy3RNC5uFomEjVsLUehpzKFDrfAplU"
auth-domain="dinos-89701.firebaseio.com">
</firebase-app>
Get your api-key here:
https://console.firebase.google.com/project/YOUR_PROJECT/settings/general/
Demo:
http://jsbin.com/joxatuz/1/edit?html,console,output
I want to use the polymerfire element to fetch the data at https://dinosaur-facts.firebaseio.com/dinosaurs and display the data in a dom-repeat element.
What am I doing wrong? How do I do that correctly?
Here is the jsBin.
http://jsbin.com/zeyimotasa/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!-- Source: https://github.com/Download/polymer-cdn -->
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/">
<!--- ->
<base href="https://polygit.org/components/">
<!--- ->
Toggle below/above as backup when server is down
<!--- ->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="polymerfire/polymerfire.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-document
path="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"
>
</firebase-document>
<template is="dom-repeat" items="[[dinosaurs]]">
[[item.order]]
</template>
<template is="dom-repeat" items="[[test]]">
[[item]]
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
dinosaurs: Array,
test: {
value: function() {
return ['foo', 'bar', 'baz'];
}
},
},
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
To get data in array/collection form, you need to use the <firebase-query> element, not <firebase-document>. You also need to initialize your application with <firebase-app>:
<firebase-app api-key="XXX" database-url="yyy" auth-domain="zzz"></firebase-app>
<firebase-query path="/dinosaurs" data="{{dinosaurs}}"></firebase-query>
<template is="dom-repeat" items="[[dinosaurs]]">
<!-- ... -->
</template>
You need a <firebase-app> to initialize the Firebase App, don't you?
I want to provide users with a snippet of HTML they can copy and paste, and show them a preview of what it will look like. So far I'm doing this with two templates with the same content, only one of them has the HTML escaped like this:
<template name="pageTemplate">
...
{{> tryItOut}}
{{> getCode}}
...
</template>
<template name="tryItOut">
<div>...</div>
<script src="script.js"></script>
<script type="text/javascript">...</script>
</template>
<template name="getCode">
<div>...</div>
<script src="script.js"></script>
<script type="text/javascript">...</script>
</template>
So in the tryItOut section they can play with the tool as it would appear on their site, and in the getCode section they will see something like this (which they can copy and paste):
<div>...</div>
<script src="script.js"></script>
<script type="text/javascript">...</script>
How can I do this using only one template?
Add the meteor markdown package with: $ meteor add markdown
Use it as follows:
pageTemplate.html
<template name="pageTemplate">
...
{{> tryItOut}}
{{#markdown}}
{{> tryItOut}}
{{/markdown}}
...
</template>
<template name="tryItOut">
<div>...</div>
<script src="script.js"></script>
<script type="text/javascript">...</script>
</template>
All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?
For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.
In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.
Above is my ideal use case, does anyone know if assemble supports anything like this?
#Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75
We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...
assemble: {
options: {
flatten: true,
assets: 'docs/assets',
partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
layout: false,
data: ['src/data/*.{json,yml}', 'package.json']
},
pages: {
src: 'src/*.hbs',
dest: 'docs/'
}
}
Layout (default.hbs)...
<!DOCTYPE html>
<html lang="en">
<head>
{{#block "head"}}
<meta charset="UTF-8">
<title>{{title}} | {{site.title}}</title>
<link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
<link rel="stylesheet" href="{{assets}}/github.css">
{{/block}}
</head>
<body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>
{{#block "header"}}
{{! Navbar
================================================== }}
{{> navbar }}
{{/block}}
{{! Subhead
================================================== }}
<header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
<div class="container">
<div class="row">
<div class="col col-lg-12">
<h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
</div>
</div>
</div>
</header>
{{! Page content
================================================== }}
{{#block "body"}}
<div class="container">
<div class="panel panel-docs">
{{> body }}
</div>
</div>
{{/block}}
{{#block "script"}}
<script src="{{assets}}/highlight.js"></script>
<script src="{{assets}}/holder.js"></script>
{{/block}}
</body>
</html>
Some page
{{#extend "default"}}
{{#content "head"}}
<link rel="stylesheet" href="assets/css/home.css" />
{{/content}}
{{#content "body"}}
<h2>Welcome Home</h2>
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
{{/content}}
{{#content "script"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Hope this helps.