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 ...
随机推荐
- 一次单片机 SFR 页引发的“事故”
一次单片机 SFR 页引发的"事故" 现象 需要使用单片机的 ADC 功能,在对 ADC 初始化后,根据内部分的 IVREN 计算出 VDD 的电压值 . 在读取时一直显示 ADC ...
- kafka_2.11-0.8.2.1+java 生产消费程序demo示例
Kafka学习8_kafka java 生产消费程序demo示例 kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kaf ...
- 基于tensorflow的MNIST手写识别
这个例子,是学习tensorflow的人员通常会用到的,也是基本的学习曲线中的一环.我也是! 这个例子很简单,这里,就是简单的说下,不同的tensorflow版本,相关的接口函数,可能会有不一样哟.在 ...
- Delphi 与 C/C++ 数据类型对照表
Delphi 数据类型 C/C++ ShorInt 8位有符号整数 char Byte 8位无符号整数 BYTE,unsigned short SmallInt 16位有符号整数 short Word ...
- TeamViewer 的早期版本下载
对于10及上以的:https://www.teamviewer.com/zhcn/download/previous-versions/ 5~9的版本下载:https://community.team ...
- 代码从Polyline读取到的坐标和属性对话框显示的不一样?
属性窗口中查询的第一个点坐标: 程序输出的各个点坐标: 差这么多? 原来是坐标系的问题,程序查询到的是世界坐标,属性窗口中是当前ucs坐标 Document doc = Application.Doc ...
- synchronized基础
synchronized 例子 例1,没有同步的时候运行同一个对象的同一个方法的结果: public class TestSyn { public void showMsg() { try { for ...
- 卡尔曼滤波器实例:跟踪自由落体运动:设计与Matlab实现
[首发:cnblogs 作者:byeyear Email:byeyear@hotmail.com] 本文所用实例来自于以下书籍: Fundamentals of Kalman Filter ...
- java反射以及动态代理的学习
java反射学习 1)字节码文件的三种获取方式 ①:Object类的getClass()方法:对象.getClass() ②:数据类型的静态的class属性:类名.class ③:通过Class类的静 ...
- Java学习——方法中传递参数分简单类型与复杂类型(引用类型)编程计算100+98+96+。。。+4+2+1的值,用递归方法实现
package hello; public class digui { public static void main(String[] args) { // TODO Auto-generated ...