RxJS流的異步處理

//app.js 
import $ from 'jquery'; 
import Rx from 'rxjs/Rx'; 

var $pull = $('#fetch');//this is a button id 
var pull$ =Rx.Observable.fromEvent($pull,'click').startWith("/hcdata.json"); 

var $result = $(".datab");//class for HTML table 
var classarray = ['id','type','name','image','tn']; 

var resp$ = pull$.flatMap(
    function(reqdata){ 
     return Rx.Observable.fromPromise($.getJSON(reqdata)); 
    }); 

var pri$ = resp$.subscribe(
    function(data){ 
     var head = Object.keys(data[0]); 
     var len = head.length; 
     $result.empty(); 
     $("<tr>").appendTo($result); 
     $.each(head,function(i,value){ 
     $("<th class='tablehead'>"+value.toUpperCase()+"`</th>").appendTo($result)})` 
     $("</tr>").appendTo($result); 
     console.log(head); 

     for(var j= 0;j<data.length;j++) 
     { 
      $("<tr >").appendTo($result); 
      for(var i =0;i<len;i++) 
      { 
       //alert(data[j][head[i]]); 
       $("<td contenteditable='true' class='"+classarray[i]+"''>"+data[j][head[i]]+"</td>").appendTo($result) 
      } 
      $("</tr>").appendTo($result); 
     } 

    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Completed"); 
    }); 

    //element assignment 
    var $idv = $(".id"); 
    var $typv = $(".type"); 
    var $nmv = $(".name"); 
    var $imgv = $(".image"); 
    var $tnv = $(".tn"); 

    //not working with no errors 
    var abc$ = Rx.Observable.defer(function(){ 
     return Rx.Observable.fromEvent($idv,'blur'); 
    }); 

    var lat$ = abc$.map(function(e){ 
     console.log(e.target.innerText);  
     return e.target.innerText; 
    }).flatMap(function(data){ 
     return Rx.Observable.fromPromise(function(data){ 
      return Promise.resolve(data); 
     }); 
    }); 

    var sub = lat$.subscribe(function(x){ 
     if (x === parseInt(x, 10)) 
      alert("data is integer") 
     else 
      alert("data is not an integer") 
    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Finally"); 
    })

我有提到的JSON文件獲取數據和構建成一個表，這是工作的罰款。問題是我想嘗試使用onblur事件上編輯的任意單元格，並進一步做對所做更改的驗證，此事件處理不起作用，沒有任何錯誤。我對這種反應式編程的異步風格很陌生。請幫忙。RxJS流的異步處理

來源

2017-01-16 Krishna Ganeriwal

如果有什麼不明確的，請讓我知道你 –

反引號是一個導致了問題檢查的編譯器錯誤或brwoser控制檯。 –

它又是BackTick問題。解決這個問題，然後你將能夠理解實際的錯誤。

//app.js 
import $ from 'jquery'; 
import Rx from 'rxjs/Rx'; 

var $pull = $('#fetch');//this is a button id 
var pull$ =Rx.Observable.fromEvent($pull,'click').startWith("/hcdata.json"); 

var $result = $(".datab");//class for HTML table 
var classarray = ['id','type','name','image','tn']; 

var resp$ = pull$.flatMap(
    function(reqdata){ 
     return Rx.Observable.fromPromise($.getJSON(reqdata)); 
    }); 

var pri$ = resp$.subscribe(
    function(data){ 
     var head = Object.keys(data[0]); 
     var len = head.length; 
     $result.empty(); 
     $("<tr>").appendTo($result); 
     $.each(head,function(i,value){ 
     $("<th class='tablehead'>"+value.toUpperCase()+"`</th>").appendTo($result)}) 
     $("</tr>").appendTo($result); 
     console.log(head); 

     for(var j= 0;j<data.length;j++) 
     { 
      $("<tr >").appendTo($result); 
      for(var i =0;i<len;i++) 
      { 
       //alert(data[j][head[i]]); 
       $("<td contenteditable='true' class='"+classarray[i]+"''>"+data[j][head[i]]+"</td>").appendTo($result) 
      } 
      $("</tr>").appendTo($result); 
     } 

    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Completed"); 
    }); 

    //element assignment 
    var $idv = $(".id"); 
    var $typv = $(".type"); 
    var $nmv = $(".name"); 
    var $imgv = $(".image"); 
    var $tnv = $(".tn"); 

    //not working with no errors 
    var abc$ = Rx.Observable.defer(function(){ 
     return Rx.Observable.fromEvent($idv,'blur'); 
    }); 

    var lat$ = abc$.map(function(e){ 
     console.log(e.target.innerText);  
     return e.target.innerText; 
    }).flatMap(function(data){ 
     return Rx.Observable.fromPromise(function(data){ 
      return Promise.resolve(data); 
     }); 
    }); 

    var sub = lat$.subscribe(function(x){ 
     if (x === parseInt(x, 10)) 
      alert("data is integer") 
     else 
      alert("data is not an integer") 
    }, 
    function(err){ 
     console.log(err); 
    }, 
    function(){ 
     console.log("Finally"); 
    })

來源

2017-01-19 08:48:16

瀏覽器窗口中沒有錯誤，如果有總是拋出模板錯誤 –

RxJS流的異步處理

回答

相關問題