alt.js 使用教程
1.action :
import alt from "../alt.js"; class DemoActions{
constructor() {
this.generateActions(
'updateTodo',
'updateTestData'//注册action名字
)
}
} export default alt.createActions(DemoActions)
2.store:
import alt from "../alt.js" import DemoActions from "../_action/demo.js";
class DemoStore{
constructor() {
this.bindListeners({
updateTodo:DemoActions.updateTodo,
updateTestData:DemoActions.updateTestData//在store中绑定对应的action名字
})
/*this.state={
todos:'465456'
}*/
this.todos='4654654654654'; //这里是注册的store数据,会有事件操作行为来改变这些数据从而改变view
this.testData='skfjsdkljfksdjfksdjf';
}
updateTodo(todo){ //store中的事件促发相应的数据改变
console.log(todo,'store todo')
this.todos=todo[0];
}
updateTestData(todo){
this.testData=todo[0];
}
} export default alt.createStore(DemoStore)
3.view:
import alt from "./alt.js";
import connectToStores from 'alt-utils/lib/connectToStores';
import React,{Component} from "react";
import {render} from "react-dom";
import DemoStore from "./_store/demo.js"; //store和action需要引进来到view中使用
import DemoAction from "./_action/demo.js"; @connectToStores //联系到alt
class Demo extends Component{
static getStores(){
return [DemoStore]; //引入需要的store
}
static getPropsFromStores(){
return DemoStore.getState(); //绑定store到组件的props,这样就可以在view中访问props来访问store的数据
}
constructor(props) {
super(props);
}
render(){
let ramdomData=Math.random()*100;
return(
<div>
<div onClick={DemoAction.updateTestData.bind(DemoAction,ramdomData)}>{this.props.testData}</div> //this.props.testdata 方式来访问store中的数据
<div onClick={DemoAction.updateTodo.bind(DemoAction,'我是上看到房价是打飞机')}>{this.props.todos}</div>//这里可以看到促发alt的action来改变对应的store的数据和view的数据变化
</div>
)
}
} render(<Demo/>, document.querySelector('#app'))
alt.js 使用教程的更多相关文章
- 《Node.js核心技术教程》学习笔记
<Node.js核心技术教程>TOC \o "1-3" \h \z \u 1.章模块化编程 2019.2.19 13:30' PAGEREF _101 \h 1 08D ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- Google Analytics统计代码GA.JS中文教程
2010-12-06 11:07:08| 分类: java编程 | 标签:google analytics ga js 代码 |举报|字号 订阅 Google Analytics ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Alt.js的入门
一.什么是Alt altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store.actions.dispatcher. 关于Flux,以下链接都做了很好的诠释 h ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 【D3.V3.js系列教程】--(十四)有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
随机推荐
- 最新apache多域名多站点配置
httpd.conf===> Listen Listen ServerName 用IP地址作为servername LoadModule rewrite_module modules/mod_r ...
- oracle-scn
在2012年第一季度的CPU补丁中,包含了一个关于SCN修正的重要变更,这个补丁提示,在异常情况下,Oracle的SCN可能出现异常增长,使得数据库的一切事务停止,由于SCN不能后退,所以数据库必须重 ...
- 二分查找法(binary_search,lower_bound,upper_bound,equal_range)
binary_search(二分查找) //版本一:调用operator<进行比较 template <class ForwardIterator,class StrictWeaklyCo ...
- OSGI基础知识整理
一. 简介: OSGi(Open Service Gateway Initiative)技术是面向Java的动态模型系统. OSGi的主要职责就是为了让开发者能够创建动态化.模 ...
- CSS背景渐变支持transition过渡效果
background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...
- C# ASCII与字符串间相互转换 (转)
引言: 最近开始学习C#,在写串口助手小工具时遇到十六进制发送与字符发送之间转换的问题, 小弟通过网络各路大神的帮助下,终于实现正确显示收发,小弟菜鸟一枚,不足之处还望各位批评指正O(∩_∩)O! 其 ...
- Spring AOP + PageHelper分页
1.增加依赖配置 <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweav ...
- 修改 spawn node.exe" ENOENT at notFoundError问题
Ionic server启动后,出现spawn node.exe" ENOENT at notFoundError ...\node_modules\cross-spawn\lib\enoe ...
- 【java】浅谈for循环
for语法: for(初始化条件; 判断条件(bool型,不可缺省); 条件改变)// 初始化条件,条件改变可以是多条,eg for(x=1,y=1;x<4;x++,y++) { 执行的操作 } ...
- TCP/IP学习20180624
计算机要互相通信.要有标准. TCP/IP协议,很多协议在一起.所以也叫TCP/IP协议族.经常接触的也就十几种. TCP/IP协议族按层次分为四层: 应用层(最上一层,http,ftp,pop3,i ...