final bug fix

example/app1.js

@@ -2,12 +2,17 @@
  * example app
  */
 (function () {
-  var app = SimpleApp('app1');
+  var app = SimpleApp('app1', {
+    localStorageRead: false
+  });
 
   app.data = {
     // if type is wrapper
     bg: {
       element: [{
+        label: 'default',
+        value: '#FFF'
+      },{
         label: 'color 1',
         value: '#A59477'
       }, {
@@ -44,6 +49,9 @@
     }
   };
 
+  // initial state:
+  app.state.welcomeStyle = 'default';
+
   // main template: the variables should be the sub elements only, main template does not carry data
   app.template.main = {
     default: '<div class="container"><form>' +
@@ -56,7 +64,7 @@
     bg: {
       _type: 'select',
       // special input such as SELECT can have a wrapper, or think <tr></tr>, etc.
-      _wrapper: ['background: <select {attr}><option>-pick color-</option>', '</select>'],
+      _wrapper: ['background: <select {attr}>', '</select>'],
       default: '<option {attr}>{label}</option>'
     },
     welcomeStyle: {

example/index.js

@@ -39,12 +39,12 @@
   };
 
   app.template.main = {
-    default: '{hdr} <div class="clearfix">{row}</div> {welcome}'
+    default: '<div class="jumbotron" {attr}>{hdr}</div>{welcome}<div class="clearfix m-b-3">{row}</div>'
   };
 
   app.template.sub = {
     hdr: {
-      default: '<div class="jumbotron" {attr}><h1>{title}</h1> {content} {link} </div>'
+      default: '<div {attr}><h1>{title}</h1> {content} {link} </div>'
     },
     welcome: {
       default: '<div {attr}><div class="panel-heading"><strong>{title}</strong></div><div class="panel-body">{content}</div></div>',

example/init.js

@@ -23,4 +23,4 @@ function loadCss(src) {
 loadJs('index');
 loadJs('app1');
 loadJs('table');
-loadCss('paper');
+loadCss('metro');