RxJS 异步处理流

Question

//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 事件来编辑任何单元格并进一步验证所做的更改，这个事件处理无法正常工作。我是这种异步反应式编程风格的新手。请帮忙。

Answer 1

这又是 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");
    })