Mobile Framework: Lettuce, a simple but not simple mobile development framework

Lettuce is a small and powerful mobile development framework.

Online demo: http://phodal.github.io/lettuce.

Example

1. Create a new instance

 var L = new lettuce();

2. Define the data

 var data = {
 about: "Template" ,
    what: "This about A Mobile Framework For Romantic" ,
    why: "Why is a new Framework"  
 };

3. Create router function

 function about() {
    var result = L.tmpl( "<h3>{%=o.about%}</h3>" , data);
    document.getElementById( "results" ).innerHTML = result;
 }; 
 
 function what() {
    var result = L.tmpl( "<h3>{%=o.what%}</h3>" , data);
    document.getElementById( "results" ).innerHTML = result;
 } 
 
 function why() {
    var result = L.tmpl( "<h3>{%=o.why%}</h3>" , data);
    document.getElementById( "results" ).innerHTML = result;
 }

4. Add a router

 L.Router
 .add(/#about/, about)
 .add(/#what/, what)
 .add(/#why/, why)
 .load();

process

Done

• Template
• Router
• Ajax
• Class
• Promises
• Event

On Going

• Model

Simple View

 var pageView = function(){};
 pageView.prototype = {
 init:function(){
        var result = L.tmpl( "<h3>" + this .message + "</h3>" , data);
        document.getElementById( "results" ).innerHTML = result;
 }
 }; 
 
 var about = new L.Class(pageView);
 about.prototype.message = data.about; 
 
 var what = new L.Class(pageView);
 what.prototype.message = data.what; 
 
 var why = new L.Class(pageView);
 why.prototype.message = data.why;

license

This code is released under the MIT license. See license.txt in this directory .

github: https://github.com/phodal/lettuce

© 2015 Phodal Huang.