一、什么是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的入门的更多相关文章

  1. JS快速入门(二)

    目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...

  2. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  3. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  4. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  5. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  6. alt.js 使用教程

    1.action : import alt from "../alt.js"; class DemoActions{ constructor() { this.generateAc ...

  7. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  8. Node.js开发入门—使用cookie保持登录

    这次来做一个站点登录的小样例,后面会用到. 这个演示样例会用到Cookie.HTML表单.POST数据体(body)解析. 第一个版本号,我们的用户数据就写死在js文件中. 第二个版本号会引入Mong ...

  9. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

随机推荐

  1. 图片轮播jQuery

          <script type="text/javascript">         //图片轮播         var bannerIndex = 0; ba ...

  2. 转:OpenCms 9.0.1汉化

    LHD私人汉化. 1.完成安装OpenCms 2.如果正确安装,在浏览器输入以下地址即可打开登录页面(默认账号/密码:Admin/admin) http://localhost:8080/opencm ...

  3. Java TCP异步数据接收

    之前一直采用.Net编写服务端程序,最近需要切换到Linux平台下,于是尝试采用Java编写数据服务器.TCP异步连接在C#中很容易实现,网上也有很多可供参考的代码.但Java异步TCP的参考资料较少 ...

  4. 在GridControl控件中使用SearchLookUpEdit构建数据快速输入

    较早之前,曾经介绍了一篇文章<使用DataGridView数据窗口控件,构建用户快速输入体验>,介绍了在传统DataGridView中嵌入一个数据窗口进行选择列表,从而实现数据快速录入的操 ...

  5. Castle 集锦

    Castle Windsor http://www.cnblogs.com/RicCC/archive/2010/03/30/castle-windsor-ioc-di.html 官方配置说明(反正我 ...

  6. 第一个MySQL 存储过程

    昨天写了人生第一个mysql存储过程:遗憾的是,这个存储过程最后还是没用上,用php代码替代 话说mysql的存储过程真是反人类,不查reference,基本不能看懂那些语句:语言中能和它相比的,只有 ...

  7. Collection中的排序

    我们来了解一下Collection的框架与接口: Set接口下面已经有SortedSet接口,其中提供了很多自带排序的实现类,例如ThreeSet,用户还能够自定义比较器来规定自己的排序规则. 本篇着 ...

  8. EMVTag系列2《磁条等效数据》

    Ø 57  磁条2等效数据 L: var. up to 19 -M(必备):此数据必须存在并提供给终端,终端在读应用数据过程中,如果没有读到必备数据,终端中止交易 按GB/T 17552,磁条2的数据 ...

  9. Python pexpect出现错误‘module have no attribute "spawn" 解决办法

    今天我遇到了这个错误,现在将错误总结如下: 1.首先查询一下自己的操作系统,pexpect中的spawn()和run()仅仅运行在POSIX系统上,在WINDOWS下是没有这两个东西的,在官网http ...

  10. Android--获取使用的总流量和每个App的上传、下载的流量

    获得每个App的上传.下载的流量. 思路就是获取到我们手机上的所有app,再获得app里面使用的权限,如果app有网络权限,就显示出来. 代码很简单,代码里面也有比较详细的注释,下面直接上代码 布局文 ...