项目作者: xddudu0101

项目描述 :
同一个页面之间的2个组件使用signals实现通信
高级语言: HTML
项目地址: git://github.com/xddudu0101/communication.git
创建时间: 2016-09-02T03:47:57Z
项目社区:https://github.com/xddudu0101/communication

开源协议:

下载


communication

同一个页面之间的2个组件使用signals实现通信

我们会发现,signals应用很简单,步骤为:

  1. 1:先创建一个signals.Signal的实例对象。
  2. var myObject = {
  3. started : new signals.Signal()
  4. };
  5. function onStarted(param1, param2){
  6. alert(param1 + param2);
  7. }
  8. 2:该对象通过dispatch()方法发布数据。
  9. myObject.started.dispatch('foo', 'bar');
  10. 3:该实例对象提供add(function(data){})方法监听到数据,data默认为发布的数据。
  11. myObject.started.add(onStarted); //add listener
  12. 4:如果需要,可以通过remove()关闭连接。
  13. myObject.started.remove(onStarted); //remove a single listener

html页面中的关键代码为:
1.全局创建sianal对象
//设置数据广播
var broadData=new signals.Signal(); //全局数据广播对象
var datas={}; //总数据对象

  1. 2.进度条组件:加入监听函数从setState中获取数据
  2. broadData.add(function(data){ //收听到数据
  3. that.setState({
  4. endValue:data.curValue,
  5. });
  6. });
  7. 3.输入框组件:将数据放入broadData
  8. getEndValue:function(){
  9. var curValue=this.refs.endValue.value;
  10. if(curValue <= 0) curValue=0;
  11. if(curValue >=100) curValue=100;
  12. datas.curValue=curValue; //将curValue放入总数居对象
  13. broadData.dispatch(datas); //发布数据
  14. },