I am trying to have certain content of a polymer element procedurally added, at a time later than its creation. I am trying to avoid a <template is="dom-if"> element.
Instead I am trying to have a nested <template> element inside the polymer element's template and have its content attached on the execution of a method, like so:
<dom-module id="simple-element">
<template>
<content id="content"></content>
<div id="display">display</div>
<template id="t">
template content
<script>console.log("template added!")</script>
</template>
</template>
<script>
var simpleElement = {
is: "simple-element",
attached : function(){
this.init();
},
init : function(){
var t = document.importNode(this.$.t.content,true);
this.$.display.appendChild(t);
},
}
Polymer(simpleElement);
</script>
</dom-module>
See it also in this jsbin http://jsbin.com/zudituvuli/edit?html,js,console,output
Is there a way to accomplish this?
Related
I am having what seems to be a common issue with Polymer 1.0: accessing nodes inside a dom-if template, but none of the proposed solutions seem to work in my case (?!)..
Here is a simple example:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-test">
<template>
<div>
<template is="dom-if" if="{{show}}" id="tplId">
<p id="message">hello</p>
</template>
</div>
<a on-tap="tapEvent">click me!</a>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-test',
show: false,
ready: function() {
},
tapEvent: function() {
// show the template
this.show = true;
// How may I access #message since the template is inhert ?
// this finds the template by id
console.log(Polymer.dom(tplId));
// this won't find the #message element inside it
console.log(Polymer.dom(tplId).querySelector('#message'))
// this neither
console.log(Polymer.dom(this.root).querySelector('#message'))
// this neither
console.log(Polymer.dom(this).querySelector('#message'))
// this neither .. Should I even be using this.shadowRoot in 1.0?
console.log(Polymer.dom(this.shadowRoot).querySelector('#message'))
// this neither
console.log(this.$$('#message'))
// this cannot work because #message is not a statically created DOM element
console.log(this.$.message)
}
});
})();
</script>
</dom-module>
I'm new to Polymer, and I feel the solution might be right under my nose..?
If this
// this neither
console.log(this.$$('#message'))
doesn't work then you probably try to query the element while it doesn't exist. When show is false the <p id="message"> element doesn't exist at all. If you need this then bind to hidden instead of using dom-if
<p id="message" hidden$="{{show}}">hello</p>
then
console.log(this.$.message);
will work as well.
I have a web component where I obtain a string from firebase, and I want to use that string in the index page but I don't know how to obtain that value to use it in my index file. I call my web component like this:
<template id="app" is="dom-bind">
<sel-edo-autonomo myPropertie="{{I_want_here_the_value_of_the propertie}}">
</sel-edo-autonomo>
<paper-input label="the value of the propertie is:" id="campoPais">{{myPropertie}}</paper-input>
</template>
Could someone help me?
You can do this. By selecting the dom-bind template in JavaScript and then accessing the property you want on like so:
<template id="app" is="dom-bind">
<sel-edo-autonomo myPropertie="{{I_want_here_the_value_of_the propertie}}">
</sel-edo-autonomo>
<paper-input label="the value of the propertie is:" id="campoPais">{{myPropertie}}</paper-input>
</template>
<script type="text/javascript">
var app = document.querySelector("#app");
var myVar = app.myPropertie;
</script>
There is some basic info on the auto-binding templates here
I have a polymer component defined as below:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="add-money">
<template>
<style></style>
<paper-dialog id="add-money-dialog" modal >
<h2>Add money</h2>
<paper-dialog-scrollable>
<div>
<span>{{account.name}}</span>
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Add</paper-button>
</div>
</paper-dialog>
</template>
<script>
var AddMoney = Polymer({
is: 'add-money',
properties: {
account: {
type: Object,
notify: true,
}
},
factoryImpl: function(acc) {
this.account=acc;
},
showPopup:function(){
console.log(JSON.stringify(this.account));
var dialog = document.getElementById("add-money-dialog");
if (dialog) {
dialog.open();
}
}
});
</script>
</dom-module>
Now, I instantiates it and add to body on click of a button from another component.
addMoney:function(e){
var button = e.target;
var dialog = new AddMoney(e.model.item);
document.body.appendChild(dialog);
dialog.showPopup();
}
While doing that, I am able to see that data available in showPopup method, but the same does not reflect on the DOM.
Curious, what could be the problem and what is the fix for it. I am a newbee to this and trying to write some component based code to understand polymer. Please advice on this. Thanks in advance.
It was infact an issue with the styles. I thought the value is not coming up since there was nothing displayed. But it was actually hidden and I could not see it. I added some styles ot the paper-dialog-scrollable and now I can see the values.
I have the following code
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html" />
<dom-module id="custom-Element">
<iron-ajax auto
url="http://api.openweathermap.org/data/2.5/forecast"
params='{"q":"California"}'
handle-as="json"
on-response="handleResponse"
last-response="{{ajaxResponse}}"></iron-ajax>
<span>{{ajaxResponse.city.name}}</span>
<script>
Polymer({
is: 'custom-Element',
handleResponse: function ()
{
console.log(' blalba');
},
ready: function () {
setInterval(function () { console.log(this.ajaxResponse); }, 1000);
}
});
</script>
</dom-module>
My problem is even though the ajax call is happening and data is retrieved the on-response "handleResponse" method is never being fired and the "ajaxResponse" isn't being populated either. I tried looking at different tutorials and code demos but I can't seem to find what's wrong with my code.
When using a <dom-module The iron-ajax or anything else needs to go inside a <template as its placed in the shadow dom.
eg
<dom-module id="custom-Element">
<template>
<iron-ajax auto ..... >
<span>{{ajaxResponse.city.name}}</span>
</template>
..
...
.....
</dom-module>
Ill explain a bit further.
Because you are creating a dom-module custom-Element and you are calling it with <custom-Element></custom-element> to display the data anything inside dom-module needs to be inside a <template></template> so its placed in the shadow dom and registers the id name custom-Element.
Think of the html5 <video> tag
Now by doing
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
it will play a video.
However when you inspect <video> you cant see any special css like for the play /stop pause buttons or any javascript because its placed in the Shadow Dom of the browser and its hidden away.
So the video tag its just a name build in the browser so you can use to play videos. To put that in the shadow dom you need a <template>
With polymer you do the same
<dom-module id="any-name">
<template>
...
</template>
</dom-module>
and to use it
<any-name></any-name>
same like the <video></video> tag in html5.
Good article here to read about web components and why templates are used
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>