Polymer Overrides Parent Method !!!

A short definition of Polymer Components
Decoupled bundle/component of script (Java Script), template (HTML) and design (CSS).

  • Developers can break big structure in small pieces of components
  • Developer can work/focus on single piece at time
  • letter on connect all components and achieve bigger picture

🙂 kind of Lego Game !!!

I want to discuss one aspect of Polymer, how to expose method to child element so child element can hook customized logic. This concept can be knows as one of the following single line statements
– method overriding
– late binding
– run-time polymorphism
– Overrides Parent Method

Keeping things short and plunge into code. 1, 2 & 3 let’s overrides urlFor method

1. Parent Element => bgs-parent

<polymer-element name="bgs-parent" attributes="name urlFor">
<template>
<button on-click="{{urlFor}}">{{name}}</button>
</template>
<script>
Polymer('bgs-parent', {
urlFor: function() {
alert("alert of " + this.name);
},
urlCaller: function() {
this.urlFor();
}
});
</script>
</polymer-element>

2. Child Element => bgs-child

<link rel="import" href="../../bgs_components/bgs-parent/bgs-parent.html">
<polymer-element name="bgs-child">
<template>
<bgs-parent name="Parent1" urlFor="{{computeUrlFor}}"></bgs-parent>
<bgs-parent name="Parent2" ></bgs-parent>
</template>
<script>
Polymer('bgs-child', {
computeUrlFor: function() {
alert("alert of bgs-child")
}
});
</script>
</polymer-element>

3. Html Page that uses bgs-child element and click Parent1 and Parent2 button and see function overrides functioning  (i.e. index_function_overrides.html)

<!doctype html>
<html>
<head>
<title>App Router</title>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bgs_components/bgs-child/bgs-child.html">
</head>
<body>
<bgs-child></bgs-child>
</body>
</html>

Download Code: https://github.com/ganesha8shiva/polymer-examples/tree/master/polymer-method-overrides

Note: Please make sure download polymer bower_components and put at the level of bgs_components to make example work for you

Ref: https://www.polymer-project.org/0.5/docs/start/getting-the-code.html

Download Polymer: https://github.com/polymer/polymer

# Keep Your Folder Structure Like Below:

  • index_function_overrides.html
  • /bgs_components/bgs-parent/
  • /bgs_components/bgs-child/
  • /bowser_components