<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test_app"> </div> <!--<script src="./lex/lex.js"></script>--> <!--<script src="./parser/parser.js"></script>--> <!--<script src="./generator/generator.js"></script>--> <!--<script src="./main/main.js"></script>--> <!--<script src="reactivity/reactive.js"></script>--> <!--<script src="./router/router.js"></script>--> <script src="build/mini.min.js"></script> <script> var app = new Mini({ el: '#test_app', template: `<div id="test_app"> <p> {{m_name}}</p> <input m-model="m_name" /> <h1> This is page No {{page_no}} </h1> <h1> I am {{m_name}} </h1> <button m-on:click="change_name()" > Change Name </button> <p m-for=" item in arr "> {{item.a}} </p> <br> <br> <p m-for=" item in obj_test "> {{item}} </p> <button m-on:click="update_array()"> view update </button> <button m-on:click="test_obj()"> is update </button> <a href="#/page2"> open test page </a> </div>`, data: { page_no: 0, obj_test: { t: 'test test_1', s: 'sss' }, m_name: ' knight king', arr: [{ a: 'a' }, { a: 'b' }, { a: 'v' }] }, methods: { update_array: function () { var temp = this.get('arr'); console.log(' temp is ', this, temp); this.set('obj_test.test_new', (Math.floor(Math.random() * 10))); // this.arr[0] = {a: 'fff'}; console.log(' after :: ', this.get('obj_test')); // this.set('arr',temp); }, test_obj: function () { this.obj_test.test_new = ' aadil '+(Math.floor(Math.random() * 10)); this.m_name = ' aadil '+(Math.floor(Math.random() * 10)+10); }, change_name: function () { this.set('m_name', 'John Snow'); } } }); var app2 = new Mini({ el: '#test_app', template: `<div id="test_app"> <h1> This is :: {{page_name}}</h1> <a href="#/page3" > go to third </a> </div>`, data: { page_name: 'test page 2' } }); var app3 = new Mini({ el: '#test_app', template: `<div id="test_app"> <h1> This is third page, {{txt}}</h1> <a href="#/" > go to home </a> </div>`, data: { txt: 'is it ?' } }); MiniRouter.when('/', { controller: app }).when('/page2', { controller: app2 }).when('/page3', { controller: app3 }).done() </script> </body> </html>