Skip to content

Instantly share code, notes, and snippets.

@saurshaz

saurshaz/index.html

Created December 11, 2014 11:12
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/f2c2d1c31a3813331d59 to your computer and use it in GitHub Desktop.
Save saurshaz/f2c2d1c31a3813331d59 to your computer and use it in GitHub Desktop.
Download ZIP
adding attributes to polymer model at runtime // source http://jsbin.com/pifihe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="adding attributes to polymer model at runtime" />
<script data-require="polymer@*" data-semver="0.5.1" src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<template id="mytemp" class="demoHTML">
<core-menu selected="0" class="" id="core_menu">
<core-submenu icon="settings" label="Topics" class="selected-element core-selected" id="core_submenu" active="">
<core-item label="Topic 1" horizontal="" center="" layout="" id="core_item"></core-item>
<core-item label="Topic 2" horizontal="" center="" layout="" id="core_item1"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites" id="core_submenu1" class="">
<core-item label="Favorite 1" horizontal="" center="" layout="" id="core_item2"></core-item>
<core-item label="Favorite 2" horizontal="" center="" layout="" id="core_item3"></core-item>
<core-item label="Favorite 3" horizontal="" center="" layout="" id="core_item4"></core-item>
</core-submenu>
</core-menu>
</template>
<polymer-element name="elem-temp" attributes="">
<template>
<h1>Polymer rocks .. and shocks me</h1>
<h2>'a' is {{supermodel.a}}</h2>
<h2>'b' is {{supermodel.b}}</h2>
<h2>'c' is {{supermodel.c}}</h2>
<p>Attribute Name :: <input type="text" value="{{attributename}}"></p>
<p>Attribute Value :: <input type="text" value="{{attributevalue}}"></p>
<p><input type="button" on-tap="{{addAttribute}}" value="Add Attribute"></p>
<br>
<p>Values of {{attributename}} in supermodel is - <input type="text" value="{{supermodel[attributename]}}"></p>
<template ref="mytemp"></template>
</template>
<script>
var model = {};
model.supermodel = {};
model['ready'] = function(){
model.attributename = 'a';
model.supermodel.a = "A";
model.attributevalue = model.supermodel.a;
}
model['addAttribute'] = function(){
console.log(this.attributename, ' ' , this.attributevalue)
this.supermodel[this.attributename]= this.attributevalue;
console.log('this.supermodel ---- ',this.supermodel);
};
Polymer('elem-temp', model.attributevalue || model);
</script>
</polymer-element>
<elem-temp></elem-temp>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="adding attributes to polymer model at runtime" />
<script data-require="polymer@*" data-semver="0.5.1" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.1/polymer.js"><\/script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"><\/script>
</head>
<body>
<template id="mytemp" class="demoHTML">
<core-menu selected="0" class="" id="core_menu">
<core-submenu icon="settings" label="Topics" class="selected-element core-selected" id="core_submenu" active="">
<core-item label="Topic 1" horizontal="" center="" layout="" id="core_item"></core-item>
<core-item label="Topic 2" horizontal="" center="" layout="" id="core_item1"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites" id="core_submenu1" class="">
<core-item label="Favorite 1" horizontal="" center="" layout="" id="core_item2"></core-item>
<core-item label="Favorite 2" horizontal="" center="" layout="" id="core_item3"></core-item>
<core-item label="Favorite 3" horizontal="" center="" layout="" id="core_item4"></core-item>
</core-submenu>
</core-menu>
</template>
<polymer-element name="elem-temp" attributes="">
<template>
<h1>Polymer rocks .. and shocks me</h1>
<h2>'a' is {{supermodel.a}}</h2>
<h2>'b' is {{supermodel.b}}</h2>
<h2>'c' is {{supermodel.c}}</h2>
<p>Attribute Name :: <input type="text" value="{{attributename}}"></p>
<p>Attribute Value :: <input type="text" value="{{attributevalue}}"></p>
<p><input type="button" on-tap="{{addAttribute}}" value="Add Attribute"></p>
<br>
<p>Values of {{attributename}} in supermodel is - <input type="text" value="{{supermodel[attributename]}}"></p>
<template ref="mytemp"></template>
</template>
<script>
var model = {};
model.supermodel = {};
model['ready'] = function(){
model.attributename = 'a';
model.supermodel.a = "A";
model.attributevalue = model.supermodel.a;
}
model['addAttribute'] = function(){
console.log(this.attributename, ' ' , this.attributevalue)
this.supermodel[this.attributename]= this.attributevalue;
console.log('this.supermodel ---- ',this.supermodel);
};
Polymer('elem-temp', model.attributevalue || model);
<\/script>
</polymer-element>
<elem-temp></elem-temp>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment