Skip to content

Instantly share code, notes, and snippets.

@saurshaz

saurshaz/index.html

Created September 30, 2014 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saurshaz/c61299732acd08446765 to your computer and use it in GitHub Desktop.
Save saurshaz/c61299732acd08446765 to your computer and use it in GitHub Desktop.
Download ZIP
1 component to include different templates and scripts instead of different components // source http://jsbin.com/finike/11
Raw
index.html
<!DOCTYPE html>
<html><head> <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script></head>
<meta name="description" content="1 component to include different templates and scripts instead of different components" />
<body>
<script>
var fn1 = function(){
alert("master");
}
fn1();
</script>
<div>
<polymer-element name="appler-super">
<script>
var proxymodel = {};
proxymodel['fn1'] = function(){
alert("script is also encapsulated -- child");
}
// applerone
// applerone element data model
proxymodel['one_ready'] = function() {};
// applerone element data model
proxymodel['one_testdata'] = "Hi Saurabh , You are number One!!!";
// applertwo
// applertwo element data model
proxymodel['two_salutations'] = [{
what: 'Hello',
who: 'World'
}, {
what: 'GoodBye',
who: 'DOM APIs'
}, {
what: 'Hello',
who: 'Declarative'
}, {
what: 'GoodBye',
who: 'Imperative'
}];
// applertwo element ready function
proxymodel['two_ready'] = function() {
};
// applertwo element :: custom function
proxymodel['two_test'] = function(event, sender, t) {
this['new']='newvalue';
this['newfn']=function(){return "value from fn";};
this.shadowRoot.querySelector(".target").innerHTML = "test added dynamic "+ this.new +" content";
alert('directly modified ' + this['two_salutations'][0]['who']);
this['fn1']();
};
// applerthree
// applerthree element data model
proxymodel['three_ready'] = function() {};
// applerthree element data model
proxymodel['three_testdata'] = "Hi Saurabh !!!";
Polymer('appler-super', proxymodel);
</script>
<template>
<!-- <appler-one></appler-one> -->
<section id="appler-one" class="appler-elements" data-element="appler-one">
<!--__APPLERBEGINTEMPLATE__appler-one__-->
<ul>
<strong>Appler One from appler-one.html</strong>
<p>{{one_testdata}}</p>
</ul>
<!--__APPLERENDTEMPLATE__appler-one__-->
</section>
<!-- <appler-two></appler-two> -->
<section id="appler-two" class="appler-elements" data-element="appler-two">
<!--__APPLERBEGINTEMPLATE__appler-two__-->
<span class="target">Target Dom</span>
<ul>
<strong>Appler Two from appler-two.html</strong>
<template repeat="{{s in two_salutations}}">
<li>{{s.what}}:
<input type="text" value="{{s.who}}">{{s.who}}</li>
</template>
<button on-tap="{{two_test}}()">Test</button>
</ul>
<!--__APPLERENDTEMPLATE__appler-two__-->
</section>
<!-- <appler-three></appler-three> -->
<section id="appler-three" class="appler-elements" data-element="appler-three">
<!--__APPLERBEGINTEMPLATE__appler-three__-->
<strong>Appler Third from appler-three.html</strong>
<p>{{three_testdata}}</p>
<!--__APPLERENDTEMPLATE__appler-three__-->
</section>
</template>
</polymer-element>
<appler-super></appler-super>
</div>
<script>
fn1();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html><html><head> <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"><\/script> <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"><\/script></head>
<meta name="description" content="1 component to include different templates and scripts instead of different components" />
<body>
<script>
var fn1 = function(){
alert("master");
}
fn1();
<\/script>
<div>
<polymer-element name="appler-super">
<script>
var proxymodel = {};
proxymodel['fn1'] = function(){
alert("script is also encapsulated -- child");
}
// applerone
// applerone element data model
proxymodel['one_ready'] = function() {};
// applerone element data model
proxymodel['one_testdata'] = "Hi Saurabh , You are number One!!!";
// applertwo
// applertwo element data model
proxymodel['two_salutations'] = [{
what: 'Hello',
who: 'World'
}, {
what: 'GoodBye',
who: 'DOM APIs'
}, {
what: 'Hello',
who: 'Declarative'
}, {
what: 'GoodBye',
who: 'Imperative'
}];
// applertwo element ready function
proxymodel['two_ready'] = function() {
};
// applertwo element :: custom function
proxymodel['two_test'] = function(event, sender, t) {
this['new']='newvalue';
this['newfn']=function(){return "value from fn";};
this.shadowRoot.querySelector(".target").innerHTML = "test added dynamic "+ this.new +" content";
alert('directly modified ' + this['two_salutations'][0]['who']);
this['fn1']();
};
// applerthree
// applerthree element data model
proxymodel['three_ready'] = function() {};
// applerthree element data model
proxymodel['three_testdata'] = "Hi Saurabh !!!";
Polymer('appler-super', proxymodel);
<\/script>
<template>
<\!-- <appler-one></appler-one> -->
<section id="appler-one" class="appler-elements" data-element="appler-one">
<\!--__APPLERBEGINTEMPLATE__appler-one__-->
<ul>
<strong>Appler One from appler-one.html</strong>
<p>{{one_testdata}}</p>
</ul>
<\!--__APPLERENDTEMPLATE__appler-one__-->
</section>
<\!-- <appler-two></appler-two> -->
<section id="appler-two" class="appler-elements" data-element="appler-two">
<\!--__APPLERBEGINTEMPLATE__appler-two__-->
<span class="target">Target Dom</span>
<ul>
<strong>Appler Two from appler-two.html</strong>
<template repeat="{{s in two_salutations}}">
<li>{{s.what}}:
<input type="text" value="{{s.who}}">{{s.who}}</li>
</template>
<button on-tap="{{two_test}}()">Test</button>
</ul>
<\!--__APPLERENDTEMPLATE__appler-two__-->
</section>
<\!-- <appler-three></appler-three> -->
<section id="appler-three" class="appler-elements" data-element="appler-three">
<\!--__APPLERBEGINTEMPLATE__appler-three__-->
<strong>Appler Third from appler-three.html</strong>
<p>{{three_testdata}}</p>
<\!--__APPLERENDTEMPLATE__appler-three__-->
</section>
</template>
</polymer-element>
<appler-super></appler-super>
</div>
<script>
fn1();
<\/script>
</body></html>
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment