I'm trying to combine 2 paper elements in my index.html (within a dom-bind) but can't find out the right syntax for this. I think I've tried all combinations mentioned in the Polymer binding documentation... In this simple example, the elevation of a paper-material element should be set by what's put into a paper-input (i.e. a value between 1 and 5). Can someone provide me the correct syntax for this?
My code:
<html>
<head>
...loading necessary components...
</head>
<body>
<template is="dom-bind">
<paper-input id="input" label="label"></paper-input>
<paper-material elevation$="{{this.$.input.value}}">
Some text here...
</paper-material>
</template>
</body>
</html>
When binding to elements that don't inherit/extend from native HTMLElements you shouldn't use the dollar sign. You can too bind directly an input to a property, below is an example:
<paper-input value="{{elevation::input}}">
<!-- or -->
<paper-input bind-value="{{elevation}}">
Here is a working example validating the elevation the user wants to set.
Related
I am trying to read the value the user inputs into a polymer paper-input object. However, this is a custom object as follows :
<dom-module id="mathjax-input">
<template>
<paper-input on-input="handleInputChanged" label="{{ label }}" value="{{ formula }}">
</paper-input>
</template>
This is intending to show the user input translated (if it's in LaTeX code) to the equivalent LaTeX result. The following is the input box:
<div>
<mathjax-input id="formula" label="Enter formula: " ></mathjax-input>
</div>
Assuming now that the "onsubmit" event of the form calls the following function:
<script>
function copy_latex(){
var input = document.getElementById('formula').value
return true;
}
</script>
variable "input" should now get what the user typed. This is not working though. Can you please help me locate the error?
-Thanks!!
Solved with:
var input = document.querySelector('#formula').formula;
Thanks a lot!
Using Polymer, I learned to understand well the difference between light DOM (whatever is in the element) and local DOM (the "hidden" side of the story).
<iron-form> (which is used like <form is="iron-form"></form>) is a little different as it doesn't have local DOM.
Now I have a custom-made widget (which is actually available in GitHub) where you go:
<hot-form-validator success-message="Record saved!">
<form is="iron-form" id="form" method="post" action="/stores/polymer">
<paper-input required id="name" name="name" label="Your name"></paper-input>
<paper-input required id="surname" name="surname" label="Your surname"></paper-input>
<paper-button type="submit" raised on-click="_submit">Click!</paper-button>
</form>
</hot-form-validator>
Now, hot-form-validator needs to get the form, and then look -- within the form -- for a specific button (with type=submit). So, I have:
(remember that this.form is the form):
attached: function(){
var paperButton = this.form.$$('paper-button[type=submit]');
...
}
It works, but it doesn't make sense that it does since $$ should be only for local DOM, whereas paper-button is actually in the form's light DOM.
attached: function(){
var paperButton = this.form.queryEffectiveChildren('paper-button[type=submit]');
This works, but I wonder if it's the best way to go.
Or... since there is no shadow DOM, should I simply no bother worrying about all this, and simply use DOM as always since there is no light/local DOM to deal with?
See https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children
If you add an id to the <content id="someId"></content> then you can use
var result = this.getContentChildren('#someId');
and then look up the desired element in the result.
You could for example create a specific <content> tag for the submit button like
<dom-module ...>
<template>
...
<content></content>
<content id="submitButton" select="paper-button[type=submit]"></content>
...
</template>
</dom-module>
and then get the element using
var submitButton = this.getContentChildren('#submitButton')[0];
This code is working
this.form.$$('paper-button[type=submit]');
because this.$$ forwards to querySelectorAll(...) and in shady DOM encapsulation is just emulated and doesn't prevent querySelectorAll(...) to find other children than local DOM children.
You can also use
var submitButton = Polymer.dom(this).querySelector('paper-button[type=submit]');
In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.
Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation
I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>
I have this code in index.html:
<core-pages selected="{{welcomPage}}">
<div class="blueBackground">
<h1>asd</h1>
<h3>asd</h3>
<paper-button on-tap="{{welcomPagePlus}}">
Keep Going
<core-icon icon="forward"></core-icon>
</paper-button>
</div>
<div>welcom 2</div>
</core-pages>
and I want to call a function when the user clicks the button. I have tried this in my app.js:
function welcomPagePlus() {
...
}
this polymer code is locate in my primary file so I can't use the Polymer({...}) function. Also the button is deep inside my shadow-dom so it looks like that is the problem. Please help me find how to call a function from the shadow-dom
You can access shadow-dom elements from the "outside" like this:
First: Give your paper-button an id-Attribute: <paper-button id="paper-button-id" ...>
var button = document.querySelector("core-pages")
.shadowRoot
.querySelector("#paper-button-id");
There is no polymer required for this code. Be aware, that the 'shadowRoot' and 'querySelector' methods may not work in every browser. There may be better solutions, using polymer-methods.
You can also do it this way. Although sometimes it's useful, I hate piercing shadow boundaries and I avoid it if I can.
Codepen example
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-pages/core-pages.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon/core-icon.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/core-icons.html">
<paper-button>
Keep Going
<core-icon icon="forward"></core-icon>
</paper-button>
<core-pages selected="second">
<div name="first" class="blueBackground">
<h1>asd</h1>
<h3>asd</h3>
</div>
<div name="second">welcome 2</div>
</core-pages>
JavaScript in the Light DOM
document.querySelector('paper-button').addEventListener('click', function(e){
var currentPage = document.querySelector('core-pages');
currentPage.selected = currentPage.selected == 0 ? 1 : 0;
});
I have a polymer paper-input element on HTML page (among other webcomponents). I need to listen on it’s value change and modify another webcomponent’s property. For a sake of simplicity, let’s imagine I need two syncronized inputs. So far, I have:
<paper-input id="fst" label="First" floatinglabel="First"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second"></paper-input>
I want to have their values to be synchronized all the way. Currently I use following code to achieve this:
document.addEventListener('polymer-ready', function() {
['#fst', '#snd'].forEach(function(el) {
document.querySelector(el).addEventListener("change", function(e) {
var value = document.querySelector(el).value;
// ⇓⇓⇓⇓⇓⇓⇓ in pseudocode: other element
document.querySelector(XOR(el)).setAttribute('value', value);
});
});
...
});
I definitely see this is ugly. I am sure, there is a proper way to achieve the goal, but I failed to google it and I’m totally stuck. I suppose observes should do the trick, but I simply can’t figure out how.
The evident code using binding variable is not working for some reason:
<paper-input id="fst" label="First" floatinglabel="First" value="{{ value }}">
</paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{ value }}">
</paper-input>
Thanks in advance.
you could use the declarative method and just use something like
<template is="auto-binding">
<paper-input id="fst" label="First" floatinglabel="First" value="{{value}}"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{value}}"></paper-input>
</template>
plunker shows it in action
http://plnkr.co/edit/3cxdOYKciKRBzROHQzgM?p=preview
edit: update answer to reflect that the use of declarative binding outside a custom element requires a auto-binding template. also it is worth noting that elements inside the auto-binding template are not accessible until the template-bound event is fired.