Alt.js的入门
一、什么是Alt
altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store、actions、dispatcher。
关于Flux,以下链接都做了很好的诠释
http://news.cnblogs.com/n/208305/
http://www.cnblogs.com/linerz/p/react-flux-example-todomvc-analysis.html
二、还需要了解
React, CommonJS, ES5 Javascript, 至于ES6,本文采用ES5做例,有兴趣的朋友可以转成ES6,关于ES6浏览器兼容问题,还要下载babel进行转换。
三、安装
alt是基于Note.js开发的,所以安装前需要安装note.js
使用npm安装alt:npm install alt
四、Alt的基本结构
项目结构
|--actions/
| |--MyActions.js
|--stores/
| |--MyStore.js
|--components/
| |--MyComponent.jsx
|--alt.js
|--app.js
六、创建alt
var Alt = require(‘alt’); var flux = new Alt(); module.exports = flux;
七、创建Actions
alt 通过自定义的方法进行actions的创建createActions
var flux = require(‘…/flux’); module.exports = flux.createActions({ GetData:function(input){ /*
webapi get 获取数据data
*/ this.dispatch(data); }, GetDetail: function(id){ /*获取单条数据*/ this.dispatch(data); } });
八、创建Store
var flux = require(‘…/flux’); var MyActions= require(‘../actions/MyActions’); var MyStore = flux.createStore({ bindListeners:{
Handledata: MyActions.GetData,
HandleDetail:MyActions.GetDetail
}, Handledata:function (data){
this.setState({datas: data}); },
HandleDetail:function(data){
this.setState({data:data});
}
},’MyStore’); module.exports = MyStore;
九、在View中使用MyComponent.jsx
var React = require(‘react’); var MyStore = require(‘../Stores/MyStore’); var MyAction = require(‘../Stores/MyAction’); var MyComponent = React.createClass({ getInitialState:function(){ return MyStore.getState(); }, getDetail: function(data,e){ var id = data.Id; MyAction.GetDetail (id); }, componentDidMount: function(){ MyStore.listen(this.onChange); }, componentWillMount: function(){ MyStore.unlisten(this.onChange); }, onChange: function(state){
this.setState(state); }, render: function(){ return( <ul>
{this.state.datas.map(function(data){
Return ( <li onClick={this.getDetail.bind(null,data)}>{data.name}</li>); })} </ul> ); } }); module.exports = MyComponent;
Alt.js的入门的更多相关文章
- JS快速入门(二)
目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- doT js模板入门
doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- alt.js 使用教程
1.action : import alt from "../alt.js"; class DemoActions{ constructor() { this.generateAc ...
- HTML5游戏开发引擎Pixi.js新手入门讲解
在线演示 本地下载 这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...
- Node.js开发入门—使用cookie保持登录
这次来做一个站点登录的小样例,后面会用到. 这个演示样例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本号,我们的用户数据就写死在js文件中. 第二个版本号会引入Mong ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
随机推荐
- Java SE技术概览 - Jave SE Platform at a Glance
从学习到工作,使用Java有几年时间,一直没有好好端详一下她的“内涵”.无意中看到一个关于Java SE的概览图,发现Java中提供的API还挺系统全面,把她放到博客中,相信对于想系统了解Java技术 ...
- Hadoop安装(Ubuntu Kylin 14.04)
安装环境:ubuntu kylin 14.04 haoop-1.2.1 hadoop下载地址:http://apache.mesi.com.ar/hadoop/common/hadoop-1. ...
- 举例详解CSS中的的优先级
计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...
- iptables用法
iptables -t nat -A PREROUTING -s 10.10.10.0/24 -i eth1 -p tcp --dport 80 -j REDIRECT --to-ports 3128 ...
- C#反射动态调用dll中的方法
//加载程序集(dll文件地址),使用Assembly类 Assembly assembly = Assembly.LoadFile(AppDomain.CurrentDomain.BaseDirec ...
- Tomcat配置虚拟主机后的登录验证码问题
先描述一下问题现象,在本地测试运行一个java web网站,一切正常.但把网站部署到Linux服务器上后,发现登录出了问题,提示验证码输入不正确.登录时需要输入验证码,而验证码的原值是先存入sessi ...
- asp.net实现md5加密方法详解
MD5加密简单的说就是把一段明文 通过某种运算方式 求出密文. 例如:明文为:abcdefg 通过一些列运算 得到 密文 7ac66c0f148de9519b8bd264312c4d64 它具有两个特 ...
- scala函数组合器
1.map 在列表中的每个元素上计算一个函数,并且返回一个包含相同数目元素的列表. scala> numbers.map(_ * 2)res3: Array[Int] = Array(2, 4, ...
- delphi函数调用约定
指令 参数存放位置 参数传递顺序 参数内存管理 使用地方 Register CPU寄存器 从左到右 被调用者 默认,published属性存取方法必须使用 Pascal 栈 从左到右 被调用者 向后兼 ...
- @Styles.Render
1.@Styles.Render 在页面上可以用@Styles.Render("~/Content/css") 来加载css 首先要在App_Start 里面BundleConfi ...