I am creating a custom module for Polymer. I need to create a global variable that can be accessed when defining a template. Something like:
<template is="dom-if" if="[[_check(myGlobalVar.foo)]]">
The global variable should also be directly accessible from inside the module (see _anotherFunction) . The JS file looks like:
Polymer({
is: 'my-module',
_check(f) {
return f == 'foobar'
},
_anotherFunction() {
console.log(myGlobalVar)
}
})
In addition, myGlobalVar should be accessible from other modules in other files. What's the best way to create it?
You can achieve that in two ways.
Have a component that can hold all the global variables and gives the same instance of its data where ever it is used. You can find the better explanation using link along with working sample
If you have lot of data that needs to be accessible globally then the best option would be using store with polymer-redux.
There is a specific Polymer element for this.
iron-meta is a generic element you can use for sharing information
across the DOM tree.
https://www.webcomponents.org/element/#polymer/iron-meta
The element fires value-changed if a value has been changed, so you probably need to set up values for it.
We don't use it in our company however, but just storing the value in memory, and then send an event whenever we set the value. Also adding a listener for every element that needs to listen to updates.
Known feature:
<div #element (click)="myMethod(element)"></div>
this passes the div back to the VM for manipulation, etc.
What I'm looking for is short hand to pass an element to a method without declaring a template variable. It could look like this:
<div (click)="myMethod($self)"></div>
This would be helpful in cases where creating elements in an ngFor stops you from giving every element a variable name or in cases where using a third party library that sends its own $event and the element ref is missing. Does anyone know of any way to do this?
What is the correct way to implement internal linking in Polymer 2.0 (linking within the same page)? I cannot seem to get access to my components that are buried within ShadowDoms, so the traditional way of using link to top and <a name="my_section"></a> and <a id="my_section"></a> does not work.
I have also tried the solutions here to no avail:
How to query elements within shadow DOM from outside in Dart?
Is it possible to access Shadow DOM elements through the parent document?
Using querySelector to find nested elements inside a Polymer template returns null
The following code that I've tried all return null, even when I add an id to my component:
document.querySelector('#my_section'); //null
this.$.my_section; //null
this.root.querySelector('#my_section'); //null
this.shadowRoot.querySelector('#my_section'); //null
Perhaps there is a way to accomplish this using <app-route>?
I'm quite new to Polymer so any advice would be appreciated. Thanks in advance.
Please share more detailed code that which elements you want to access and manuplate. Here at this document
https://www.polymer-project.org/2.0/docs/devguide/dom-template
under the Static node map head shows shortly :
The this.$ hash is created when the shadow DOM is initialized. In the
ready callback, you must call super.ready() before accessing this.$.
When I google "Knockout Google Maps" I find quite some KO-based Google Maps implementations. All of which I was able to find take the approach to use a custom binding handler whereas I originally intended to implement it as a Knockout component.
Examples:
http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding
http://www.hoonzis.com/knockoutjs-and-google-maps-binding/
https://github.com/manuel-guilbault/knockout.google.maps
Can anyone point me in the right direction why one would prefer a custom binding handler over a KO component here?
My planned use case is this:
I'm implementing a page with a list of address search results. The list so far is a KO component, each list entry is generated by another KO component which the list component repeatedly calls in a foreach binding. Next to this list of search results I need a google map showing the result entries also in the map. There will also be quite a lot of interaction between the list, the list entries and the map.
Here's what I've got so far:
var GMap = function () {
var self = this;
var initMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.4387974, lng: 6.9922915}
});
};
initMap();
};
$(document).ready(function() {
ko.components.register('gmap', {
viewModel: GMap,
template: { element: 'gmap' }
});
ko.applyBindings();
});
#map {
height: 400px;
width: 600px;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.22"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<gmap></gmap>
<template id="gmap">
<div id="map"></div>
</template>
A component and a custom handler are completely different things.
Custom binding
Basically a custom binding have access to:
the HTML component where it's used
the bound value (expression supplied to the binding)
all the other bindings in the element
the binding context of the element, from which you can acces to $root, $parent, and so on
Its definition includes two functions:
init: that allows to do the initial setup, like initializing widgets, setting event handlers and so on
update: it's called after init. In that moment you can access properties (including observable properties) through the binding, all the element bindings, the context and so on. This creates subscriptios that will call update when any of the accessed observable changes.
So a custom binding shuld be used when you need to interact directly with the DOM element, for example to modify its properties, initialize widgets, subscribe to events and so on
Component
A component is completely different. When you define a componente you must define:
a template, which is a set of DOM elements, usually with bindings
a viewmodel (usually a constructor or a factory)
When you use the component:
the viewmodel is instanced
the template is loaded
the viewmodel is bound to the template
So, a componente allows to reuse viewmodels and templates
So, what's the difference?
A custom binding has direct access to the DOM elements, allowing to interact with them, subscribe to events, modify properties, and so on
A component is only a viewmodel, and a set of DOM elements with bindings to that particular viewmodel.
So, in the case of Google Maps, which needs to initialize a widget (the map) and interact with Map events, and respond to observable propèrties cahnges, you could never use a component, because the component doesn't allow the direct interaction with the DOM elements. (Remember is a bunch of HTML elements with bindings, and the corrresponding view model, whic can't include any logic to intercat with those elements).
A custom binding usually applies to a single element (althoug it could handle its children, like foreach). In the case of Google Maps you only need the element in which you'll show the map.
A component is usually a more or less complex set of DOM elements, which are not accesible "from the outside". The only communication with the main viewmodel is done through parameters. The component cannot directly interact with the DOM elements: it must do it via ko bindings.
So, for the case of Google Maps is clear that you need a custom binding.
It only makes sense to create a component when you want to modularize or reuse a set of DOM elements, and the related viewmodel, which can also include functionality like accessing web services (via AJAX), making computations (propbaly by using computed observables), and so on. For example, a shopping cart could be implemented using a component, which would include:
the DOM elements to show the items in the cart (probably an HTML table, and some controls)
controls to modify the cart content (for example for deleting elements, or changing quantities)
a viewmodel that show the total, the taxes and so on
functionality to store the cart for later, or pay for it (which could be ajax calls to services)
In this case the cart would have a viewmodel which would include the computed observables (to show the total and taxes), the functionality to remove items, or modify quantities, or store or pay, and so on. And a concrete set of DOM elements with bindings for this viewmodel, i.e. the HTML to show the cart and interact with it.
In the case of Google Maps a component could not be used without the help of a custom binding or with the hacky use of additional, non ko, scripts.
If you wanted to show a list of places beside a map, and modify that list, you could use a component, which would include a viewmodel with the list and related functionality, and a template including an element with the Google Maps custom binding. That would make sense: viewmodel + several elements.
Conclusion
This all means that a custom binding usually have a deep interaction with the bound DOM element, while a component has a higher level interaction with the elements, which must be done through bindings.
So, they play a role at a very different level. You cannot compare or interchange them.
If you insist on doing so, you could create a beast of a binding which behaves like a component, becasue you have full control on the elements, and full acces to the view model, but that's harder to implement than a component. And probably could do the other way round also in some esoteric way.
Binding
Binding, a custom or not, is a very simple concept that covers 2 things:
A property of a UI element changes, and thus it should update an object (ViewModel)
A property of the object (ViewModel) changes, and thus it should update the UI element.
From the above if only 1 implemented, it is called One Way Binding (because if you change the UI, it will update the object but not the other way around). If both 1 and 2 are implemented, it is called Two Way Binding.
So at any time if you think you need something to do that, you would need to use binding, custom binding if the framework does not have the binding you need.
Most likely, the maps you speak of needed something like above. And it actually did because the author says this in the first paragraph:
Concretely, you can learn how to make the maps marker part of the View and automatically change its position any time when the ViewModel behind changes.
See, the author talks about 2 above: When the ViewModel changes, change the position of UI element.
Component
A component is a concept of having a reusable item that may have a UI but not necessarily, and all the code needed to make it work packaged along with it. This way it can be reused. For example, it may simply be an input UI element that only allows numbers. All the code needed for it is packaged along with the UI element.
Now the code packaged along with it may code related to bindings. It may even have custom bindings if the framework they used did not have the binding they needed. In addition it may have additional code that has nothing to do with binding.
Furthermore, a component may have a single UI element or multiple. A good example of a component with multiple elements would be a message box.
In Conclusion
Bindings and Components are separate things. A component may have bindings within it or it may have other code to make it work or both.
In the case of the maps you speak of, they have only added a feature to it: To react to changes in the ViewModel. It is not a component because it is not self contained and reusable.
They could have done it using a component. However, if they did that and said it is a KO component, it may still have KO specific binding code packaged with it along with the ViewModel and all the UI elements needed.
Update: here are the docs for this situation: Conditional templates use the if attribute to conditionally create a template instance.
this app, plnkr.co, should do the following:
use core-ajax component to get project_location from DB(JSON in this example)
use google-map component to display the map with marker
when user drags the market, use core-ajax to save the new location to DB
Q: How to make google-map component to wait with it's rendering until AJAX request is finished?
Currently this error is appearing:
"Exception caught during observer callback: TypeError: latitude must be a number", and I assume that is because google-map is rendered before {{project_location}} is initiated.
<core-ajax id="ajax_get_location"
auto
url="project_location.json"
params='{"idProject":"{{idProject}}"}'
on-core-response="{{locationLoaded}}"
handleAs="json"
response = "{{project_location}}"></core-ajax>
<google-map id="project_location_map"
zoom="{{project_location.location_map_zoom}}"
fitToMarkers>
<google-map-marker
latitude ="{{project_location.location_map_marker_latitude | toFixed(2)}}"
longitude ="{{project_location.location_map_marker_longitude | toFixed(2)}}"
title ="{{project_title}}"
draggable ="true"
>
{{project_title}}
</google-map-marker></google-map>
I think the cleanest approach is not to think about this as a timing issue with <core-ajax>. Fundamentally, the problem is that you don't want to include the <google-map> element on your page until there's a value for project_location. In your snippet, the project_location value comes from <core-ajax>, but you could easily imagine a different implementation in which project_location is populated via some other means.
So, if you think about it that way, what would make sense is to wrap the <google-map> in a conditional template that checks for a value of project_location:
<template if="{{project_location}}">
<google-map>
...
</google-map>
<template>
You can change a value on the model when core-axax has finished and wrap the other elements with a <template if="{{ajaxHasFinished}}">...</templ<te>
Besides what others have said, an another way is demonstrated in the tutorial https://www.polymer-project.org/docs/start/tutorial/step-3.html, in which you create another element to do the ajax thing, and use it in your original element. The data transfer is achieved through attributes and data binding.
I think it's a better way because you separate the data display with data fetching, making it look better in software engineering.
P.S. I've tried what other answers said, but I found out it didn't matter whether you use if condition or not.