Mobile Framework:简约不简单的移动开发框架Lettuce-移动开发框架介绍

Lettuce是一个小巧而有力的移动开发框架。

在线demo：http://phodal.github.io/lettuce.

示例

1.新建实例

var L = new lettuce(); 
1.

2.定义数据

var data = { 
    about: "Template", 
    what: "This about A Mobile Framework For Romantic", 
    why: "Why is a new Framework" 
}; 
1.
2.
3.
4.
5.

3.创建router功能

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; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

4.添加router

L.Router 
    .add(/#about/, about) 
    .add(/#what/, what) 
    .add(/#why/, why) 
    .load(); 
1.
2.
3.
4.
5.

过程

Done

Template
Router
Ajax
Class
Promise
Event

On Going

Model

简单视图

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; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

许可

此代码是在MIT许可下发布。看到这个目录license.txt。

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