-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathSample1.html
86 lines (84 loc) · 2.27 KB
/
Sample1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<header>
<script>
// Creating framework to render page dynamically
var KReact = {
version: 1.0,
render: function(item, whereToRender){
var rootDiv = document.getElementById(whereToRender);
var temp = document.createElement('div');
if(item.render){
temp.innerHTML = item.render();
item.divId = whereToRender;
} else {
temp.innerHTML = item;
}
var htmlObject = temp.firstChild;
if(rootDiv.firstChild){
rootDiv.removeChild(rootDiv.firstChild);
}
rootDiv.appendChild(htmlObject);
if(item.componentDidMount){
item.componentDidMount();
}
},
createClass: function(options){
return function(){
for(var index in options){
var prop = options[index];
this[index] = prop;
}
this.setState = function(props){
for(var index in props){
var prop = props[index];
this.state[index] = prop;
}
KReact.render(this, this.divId);
}
};
},
// creating instance
createElement: function(className){
var instance = new className();
instance.constructor();
instance.componentWillMount();
KReact.PageMapper[instance.id] = instance;
return instance;
},
PageMapper: {
}
}
</script>
<script>
function onLoad(){
var App = KReact.createClass({
id: 'MainScreen',
constructor: function(){
this.state = {
headerText: 'Hello World'
}
},
componentWillMount: function(){
debugger;
},
componentDidMount: function(){
debugger;
},
onButtonClick: function(options){
var instance = KReact.PageMapper[options];
instance.setState({headerText: 'Text Modified'});
},
render: function(){
var button = '<button type="button" onclick="('+this.onButtonClick+')(\'MainScreen\')">Change Header</button>';
return '<div><h1>'+this.state.headerText+'<h1>'+button+'<table style="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td> <td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr></table></div>';
}
});
//document.getElementById('root').innerHTML = 'Hello World';
KReact.render(KReact.createElement(App),'root');
}
</script>
</header>
<body onload="onLoad()">
<div id="root"></div>
</body>
</html>