+demo
+src
+css
+images
+--js
+--component
+--controllers
---AppController.js
---IndexController.js
+--stores
---listStore.js
+--views
---index.tpl
---app.js
---hydra.js
---index.html
---zebra.js
---zebra.config.js
var app = window.app = hydra.module('koala-demo');
app.config({
base: 'js',
router: {
'/': {
controller: 'IndexController',
template: 'views/index'
}
},
view: '#view'
});
app.controller('IndexController', 'stores/listStore', function (listStore) {
var sort = 'asc';
Template.index.events({
'.del-button click': function (e) {
var did = this.parentNode.parentNode.id.split('_');
listStore.deleteItem(did[1]);
}
});
listStore.initialState();
});
app.store('listStore', function (state) {
var root = this;
return {
initialState: function () {
var data = {
topLevel: '1',
list: [{
id: 1,
avatar: 'images/avatar1.jpg',
name: '比尔·盖茨',
fortune: 5200,
company: '微软',
age: 59,
country: '美国'
}, {
id: 2,
avatar: 'images/avatar2.jpg',
name: '卡洛斯·斯利姆·埃卢家族',
fortune: 5100,
company: '美洲电信',
age: 59,
country: '墨西哥'
}, {
id: 3,
avatar: 'images/avatar3.jpg',
name: '沃伦·巴菲特',
fortune: 4600,
company: '伯克希尔·哈撒韦',
age: 84,
country: '美国'
}]
};
state.setState(data);
},
deleteItem: function (did) {
var data = state.getState();
data.list = data.list.filter(function (item) {
if (item.id == did) {
return false;
} else {
return true;
}
});
state.setState(data);
}
};
});
自己搭建一个静态服务器，
然后编译demo
node zebra.js -w
完整代码请参见 github 项目
https://github.com/lin-xi/hydra/tree/master/examples/todo
var tpl = '';
hydra.render(tpl,{country:"中国",address:{city:"北京"}}, function(text){
console.log(text); //'中国
北京
});
循环
var tpl = '
';
hydra.render(tpl,[{country:"中国"}, {country:"美国"}, {country:"阿富汗"}], function(text){
console.log(text); //中国
美国
阿富汗
});
If 判断
var tpl = '
-老得很
-老头
';
hydra.render(tpl,{age:"68"}, function(text){
console.log(text); //老头
});
引入另一模板
var tpl = '';
//js/views/antherTemplate.tpl
hydra.render(tpl,{time: new Date().getTime()}, function(text){
console.log(text); //1445942479195
});
上面的语法可以组合使用
其中， dateTime 为filter，可以对time的值进行处理 view/temp.js
//定义一个helper值
Template.newTemplate.helpers({
time: function (argument) {
return new Date().getTime();
}
});
//定义一个fitler
Template.newTemplate.filters({
dateTime: function (input) {
var out = "";
if (input && input != '0') {
var d = new Date(input);
var dt = [],
ti = [];
dt.push(d.getFullYear());
dt.push(d.getMonth() + 1);
dt.push(d.getDate());
ti.push(d.getHours() < 10 ? '0' + d.getHours() : d.getHours());
ti.push(d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes());
ti.push(d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds());
out = dt.join('/') + ' ' + ti.join(':');
}
return out;
}
});
模板渲染结果
hydra.load('view/temp').render('#demo', {});
//2015/10/27 22:30:30
模板的名称为newTemplate，在任何js中，可以通过Template.模板名 添加helpers和filters。
Template.index.events({
'.del-button click': function (e) {
var did = this.parentNode.parentNode.id.split('_');
listStore.deleteItem(did[1]);
}
});
app.store('listStore', function (state) {
var me = this;
return {
initialState: function () {
me.get('/getListData', {}, function (data) {
state.setState(data);
});
},
deleteItem: function (did) {
var data = state.getState();
data.list = data.list.filter(function (item) {
if (item.id == did) {
return false;
} else {
return true;
}
});
me.post('/removeListItem', {id: did}, function () {
state.setState(data);
});
}
};
});
创建一个store时，会注入state对象。
state对象有两个方法
state.getState(); 返回当前数据
state.setState(); 设置当前数据
setState时，会自动将新数据渲染到dom上
app.controller('IndexController', 'stores/listStore', function (listStore) {
listStore.initialState();
});
hydra.component('AlertDialog', {
props: {
title: '提示'
},
template: __inline('./alertDialog.tpl'),
render: function () {
var el = this.$el;
var dialog = el.querySelector('.dialog');
var w = dialog.offsetWidth,
h = dialog.offsetHeight;
var l = (window.innerWidth - w) / 2;
var t = (window.innerHeight - h) / 2;
dialog.style.left = l + 'px';
dialog.style.top = t + 'px';
},
events: function () {
var el = this.$el;
return {
'.close-button click': function (e) {
el.parentNode.removeChild(el);
}
};
}
});
在Component渲染到dom上之后，会调用render方法，然后进行事件绑定。
render和events的上下文中，会注入Component的根节点$el。
__inline('./alertDialog.tpl'); zebra在预编译的时候会将tpl的内容注入
直接加载我是一个对话框，对话本领强
hydra.loadComponent('alertDialog', function (alertDialog) {
alertDialog.newInstance({
transclude: '添加成功',
})
});
hydra.component('AlertDialog', {
props: {
title: '提示'
},
template: __inline('./alertDialog.tpl'),
render: function () {
......
},
events: function () {
var el = this.$el;
var pipe = this.eventPipe('stateChange');
pipe.receive({
'close': function(){
el.parentNode.removeChild(el);
}
});
return {
'.close-button click': function (e) {
el.parentNode.removeChild(el);
pipe.write('close');
}
};
}
});
{
"base": "./src",
"output": "./static",
"rules": {
"js": {
"compile": false,
"uglify": false,
"md5": {
"exclude": []
}
},
"css": {
"compress": true,
"md5": {
"exclude": []
}
},
"html": {
"resourceMap": true
},
"image": {},
"other": {
"copy": true
}
},
"deploy": [{
"receiver": "http://cq02-map-sv-control04.cq02.baidu.com:8890/receiver.php",
"from": "./static",
"to": "/home/map/odp_crm/webroot/mobile-framework",
"exclude": "svn|rar|psd|docx"
}],
"clean": true
}
执行 node zebra.js -w 之后，zebra会自动监听src目录文件的修改，然后重新编译发布到static目录下。
var app = hydra.module('app');
var template = hydra.load('view/index');
var template = hydra.render('', {country: '中国'}, function(html){
console.log(html);
});
hydra.component('AlertDialog', {
props: {
title: '提示'
},
template: __inline('./alertDialog.tpl'),
render: function () {
},
events: function () {
var el = this.$el;
return {};
}
});
hydra.loadComponent('alertDialog', function (alertDialog) {
alertDialog.newInstance({
transclude: '添加成功',
})
});
app.config({
"base": 'js',
"router": {
'/': {
controller: 'IndexController',
template: 'views/index'
}
},
"view": '#view'
});
app.redirect('/product');
app.setRouteParam({shopId: 30872628});
var shopId = app.getRouteParam('shopId');
app.removeRouteParam('shopId');
app.removeRouteParam('shopId');
var route = app.getCurrentRoute();
var template = app.getCurrentTemplate();
scope.setState(data);
scope.apply();
加载解析一个模板后，会生成一个模板的实例对象 通过 Template.index 访问
Template.index.helpers({
time: function (argument) {
return new Date().getTime();
}
});
Template.brandItem.filters({
dateTime: function (input) {
var out = "";
if (input && input != '0') {
var d = new Date(input);
var dt = [],
ti = [];
dt.push(d.getFullYear());
dt.push(d.getMonth() + 1);
dt.push(d.getDate());
ti.push(d.getHours() < 10 ? '0' + d.getHours() : d.getHours());
ti.push(d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes());
ti.push(d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds());
out = dt.join('/') + ' ' + ti.join(':');
}
return out;
}
});
日期格式化
Template.index.events({
'.sort1 click': function (e) {
sort = sort == 'asc' ? 'desc' : 'asc';
listStore.sortItem(sort);
},
'.del-button click': function (e) {
var did = this.parentNode.parentNode.id.split('_');
listStore.deleteItem(did[1]);
}
});
Template.index.compile({
content: '', //模板字符串
data: , //当前作用域数据
global: , //整个数据
_filters: filters //当前模板的filters
});
Template.index.eval("country == '中国'",, );
//参数1：表达式
//参数2：当前作用域数据
//参数3：整个数据
Template.index.bindEvent(); //系统内部自动调用
var template = hydra.load('view/index');
var template = hydra.load('view/index');
template.render(nodeSelector, data);
//nodeSelector dom
//data 数据
var component = hydra.loadComponent('alertDialog');
var component = hydra.loadComponent('alertDialog');
component.new('com_43d82f2a54', 'instance_name', {transclude：‘hello，world'}, 'index');
//参数1：component 唯一Id
//参数2：实例名称
//参数3：属性对象
//参数4：模板名称
一般为系统内部调用
var component = hydra.loadComponent('alertDialog');
component.newInstance(document.body, {transclude：'hello，world'});
//参数1：渲染的dom节点
//参数2：属性对象