Getting started with polymer Unit Testing Event Handling Debugging Example of Polymer toggleAttribute Using external Javascript Libraries with Polymer Looping, the template dom-repeat.iron-data-table Reusable Modals with Polymer Google Map Mark With Built in Cache Creating app using Polymer Starter Kit SUPER-Optimising for production Polymer Cheat Sheet

Using external Javascript Libraries with Polymer

Remarks:

In this example, the library used in the component is installed with the package manager bower. This allows for easy distribution of a library-dependent component. If the library you wish to use is not distributed via a package manager, it can still be loaded the same way but your component will be require more effort to be used by others.

The lazy loading example uses a simple string for the library path. If one wished to avoid magic string constants, paths could be loaded using iron-ajax from a JSON file into an object and passed between components if needed.

Import a static HTML file

Create an HTML file (in this example libraries/turf.html) with the library you want to load:
```
<script src="../../bower_components/turf/turf.min.js"></script>
```

Import the HTML file (libraries/turf.html) in your component with the rest of your imports:

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

Invoke your library (example usage):

    var point = turf.point([42.123123, -23.83839]);

Lazy Loading

Create an HTML file (in this example libraries/turf.html) with the library you want to load:
```
<script src="../../bower_components/turf/turf.min.js"></script>
```

Import and use your library when needed:

doSomething: function(argument, anotherArgument): {

    // If library has not been loaded, load it
    if(typeof turf == 'undefined') {
        this.importHref(this.resolveUrl('../libraries/turf.js'), function() {
            // Once the library is loaded, recursively call the function
            this.doSomething(argument, anotherArgument);
        }.bind(this));

        return;
    }
    
    // Example usage of a library method
    var point = turf.point([42.123123, -23.83839]);
}

Parameters:

Parameter	Description
this.resolveUrl('../libraries/turf.js')	Resolves the location of your library
function() {this.doSomething(argument, anotherArgument);}.bind(this));	Callback. This example uses a closure to recurse this.doSomething()

Contributors

Topic Id: 6034

Example Ids: 21068,21069

This site is not affiliated with any of the contributors.