解析 LiveQuery 订阅总是收到旧版本

Question

我有一组信标，我想在地图上显示。我希望它们的位置在应用程序的所有实例之间同步。

也就是说，当我将 beacons 移动到另一个位置时，我希望此更改反映在应用程序的其他实例中。

这使用 Parse javascript SDK 1.11.0.

我定义了以下解析模型，它表示保存在服务器上的集合中的每个对象：

    var Baliza = Parse.Object.extend("Balizas");

    Baliza.prototype.show = function(){
        var self = this;

        var start= '<div class="row" style="width: 350px;">\n' +
            '   <div class="control-group" id="fields">\n' +
            '      <label class="control-label" style="text-align: center;" for="field1">Introducir Mac Asociadas a Ese Punto</label>\n' +
            '      <div class="controls">\n' +
            '         <form id="form" role="form" autocomplete="off">';

        var tmp = '';

        tmp = tmp + '<div  class="entry input-group col-xs-12">\n' +
            '               <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[0]+'">\n' +
            '               <span class="input-group-btn">\n' +
            '               <button baliza-id='+self.id+' class="btn btn-success btn-add" type="button">\n' +
            '               <span class="glyphicon glyphicon-plus"></span>\n' +
            '               </button>\n' +
            '               </span>\n' +
            '            </div>';


        if (self.get("mac").length>1){
            for (var i=1; i<self.get("mac").length; i++) {
                tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
                    '               <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[i]+'">\n' +
                    '               <span class="input-group-btn">\n' +
                    '               <button baliza-id='+self.id+' class="btn  btn-remove col-xs-12" type="button">\n' +
                    '               <span class="glyphicon glyphicon-minus"></span>\n' +
                    '               </button>\n' +
                    '               </span>\n' +
                    '            </div>';
            }
        }

        var end = '</form>\n' +
            '         <br>\n' +
            ' <button  type="button" baliza-id='+self.id+' class="btn btn-block btn-info btn-sm ">Salvar</button>\n' +
            ' <button  type="button" baliza-id='+self.id+' class="btn btn-block btn-danger btn-sm ">Eliminar</button>\n' +
            '      </div>\n' +
            '   </div>\n' +
            '</div>';

        //console.log('impirmiendo marker');
        //console.log(this.marker);

        console.log("Localización -> ", self.get("localizacion"));

        if(self.marker != null) {
            self.marker.setLatLng(new L.LatLng(self.get("localizacion").latitude, self.get("localizacion").longitude),{draggable:'true'});
        } else {

            self.marker = new L.marker([ self.get("localizacion").latitude, self.get("localizacion").longitude], {
                icon: L.AwesomeMarkers.icon({icon: 'certificate', prefix: 'glyphicon', markerColor: 'blue'}),
                draggable: 'true'
            }).bindPopup("", {maxWidth: 560});

            self.marker.on('dragend', function(event){

                var position = event.target.getLatLng();

                console.log("Notify new Location -> ", position.lat, position.lng);


                //Enviamos El Dato a Parse
                this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
                this.save(null, {
                    success: function (balizaSaved) {
                        console.log("Baliza Guardad con éxito: ", balizaSaved);

                    },
                    error: function (baliza, error) {
                        alert('Failed to create new object, with error code: ' + error.message);
                    }
                });
            }.bind(this));

            map.addLayer(self.marker);
        }

        self.marker.getPopup().setContent(start+tmp+end);


    };

负责通知地图位置变化的代码如下：

self.marker.on('dragend', function(event){

                var position = event.target.getLatLng();

                console.log("Notify new Location -> ", position.lat, position.lng);


                //Enviamos El Dato a Parse
                this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
                this.save(null, {
                    success: function (balizaSaved) {
                        console.log("Baliza Guardad con éxito: ", balizaSaved);

                    },
                    error: function (baliza, error) {
                        alert('Failed to create new object, with error code: ' + error.message);
                    }
                });
            }.bind(this));

订阅创建如下，

var query = new Parse.Query(Baliza);
var subscription = query.subscribe();


var mapaBalizasParse = new Map();

// After specifying the Monster subclass...
//Parse.Object.registerSubclass('Balizas',Baliza);

subscription.on('create', function (balizaCreated) {
    console.log("New baliza created -> ", balizaCreated.toJSON());
    var baliza = new Baliza(balizaCreated.toJSON());
    baliza.show();
    mapaBalizasParse.set(baliza.id, baliza);
});


subscription.on('update', function (balizaSaved) {
    console.log('BALIZA ACTUALIZADA -> ', balizaSaved.toJSON());
    var baliza = mapaBalizasParse.get(balizaSaved.id);
    baliza.set("mac", balizaSaved.get("mac"));
    baliza.set("localizacion", balizaSaved.get("localizacion"));
    baliza.show();
});

subscription.on('delete', function (baliza) {
    //console.log(mapaBalizasParse.get(baliza.id));
    map.removeLayer(mapaBalizasParse.get(baliza.id).marker);
    mapaBalizasParse.delete(baliza.id);
});

subscription.on('leave', function (balizaLeave) {
    console.log('Leave called -> ', balizaLeave.id, balizaLeave.get("localizacion"));
});

subscription.on('enter', function (balizaCalled) {
    console.log('Enter called -> ', balizaCalled.id, balizaCalled.get("localizacion"));
});

每次我点击地图上的一个位置时，我都会创建一个 Beacons，如下所示：

function onMapClick(e) {
        var baliza = new Baliza();

        baliza.set("localizacion",new Parse.GeoPoint(e.latlng.lat, e.latlng.lng));
        baliza.set("mac",["11:22:33:44:55:10"]);
        baliza.set("editando",true);

        baliza.save(null, {
            success: function(baliza) {
                //Añadimos La Baliza Al Mapa Interno
                //mapaBalizasParse.set(baliza.id,baliza);
                //baliza.show();
            },
            error: function(baliza, error) {
                alert('Failed to create new object, with error code: ' + error.message);
            }
        });
    }

当前注册的“信标”列表如下：

query.find({
            success: function(results) {
                console.log("Total Balizas -> " + results.length);
                for (var i = 0; i < results.length; i++) {
                    var currentBaliza = results[i];
                    console.log("Baliza " + i + " -> ", currentBaliza);
                    currentBaliza.show();
                    mapaBalizasParse.set(currentBaliza.id, currentBaliza);
                }
            },
            error: function(error) {
                console.log("Error: " + error.code + " " + error.message);
            }
        });

问题是，如果我将信标从位置（纬度：40.961229844235234，经度：-5.669621229171753）移动到地图中的另一个点（纬度：40.9604196476232，经度：-5.6707102060318）

应用程序的其他实例在更新事件中接收到对象的旧版本，其位置字段未更改（纬度：40.961229844235234，经度：-5.669621229171753）

有人可以告诉我我在代码中做错了什么。

提前致谢。

Answer 1

我一直在用最少的配置做一些测试，这是我看到的：

在加载地图集中所有信标的回调中，您使用此代码：

var beacon = new Baliza({id: baliza.id,  localizacion:  
baliza.get("localizacion") , mac: baliza.get("mac"), editando: 
baliza.get("editando")});

但是当你添加一个在 'create' 事件的回调中创建的新信标时，你使用这个：

var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");

在我的测试中，如果您使用第一个代码，信标会正常更新，但如果您使用第二个代码，则会在 javascript 控制台中登录旧版本的信标。

您未包含在重载构造函数中的空构造函数中似乎发生了一些特殊情况。

希望对您有所帮助。 :)

这是我的完整代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple test parse JS</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>


<input type="text" id="txtIndex" class="textbox" value="1">

<button type="button" class="btn-add">Add beacon</button>
<button type="button" class="btn-modify">Modify beacon</button>
<button type="button" class="btn-remove">Remove beacon</button>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://unpkg.com/parse@1.11.0/dist/parse.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Own JS-->
<script src="./js/demo_parse.js"></script>

</body>
</html>

JS

var mapBeacons = new Map();
var query;
var subscription;
var Baliza;


function loadAllBeacons(){

    query.find({
        success: function(results) {
            for (var i = 0; i < results.length; i++) {
                //Vamos Creando Los Objetos Que Recibimos
                var beacon = new Baliza();
                beacon.id = results[i].id;
                beacon.localizacion = results[i].get("localizacion");
                beacon.mac = results[i].get("mac");
                mapBeacons.set(beacon.id,beacon);
            }
        },
        error: function(error) {
            console.log("Error: " + error.code + " " + error.message);
        }
    });
}

function modifyBeacon(){

    var key = $("#txtIndex").val();
    var baliza = mapBeacons.get(key);
    var my_chance = new Chance();
    var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
    baliza.set("localizacion",randomLocation);

    baliza.save(null, {
        success: function(baliza) {
            // Execute any logic that should take place after the object is saved.
            mapBeacons.set(baliza.id,baliza);
        },
        error: function(baliza, error) {
            // Execute any logic that should take place if the save fails.
            // error is a Parse.Error with an error code and message.
            alert('Failed to remove new object, with error code: ' + error.message);
        }
    });
}

function removeBeacon(){

    var key = $("#txtIndex").val();
    var baliza = mapBeacons.get(key);

    baliza.destroy({
        success: function(myObject) {
            // The object was deleted from the Parse Cloud.
            //map.removeLayer(baliza.marker);
            //mapaBalizasParse.delete($(this).attr('id'));
            console.log("Beacon removed sucessfully");
            console.log(myObject);

        },
        error: function(myObject, error) {
            // The delete failed.
            // error is a Parse.Error with an error code and message.
        }
    });

}

function addNewBeacon(){

    var baliza = new Baliza();
    var my_chance = new Chance();
    var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())

    baliza.set("localizacion",randomLocation);
    baliza.set("mac",["11:22:33:44:55:10"]);
    baliza.set("editando",true);

    baliza.save(null, {
        success: function(baliza) {
            console.log("OnSave Beacon saved sucessfully");
            console.log(baliza);
        },
        error: function(baliza, error) {
            alert('Failed to create new object, with error code: ' + error.message);
        }
    });

}


$(function() {

    console.log( "ready!" );

    //Init parse
    Parse.initialize("6xuPkPgqEfCdzXwaxAfUuKbTAglJL5ALa1mmY8de");
    Parse.serverURL = 'http://encelocalizacion.com:1337/parse';

    //Objeto Ppara interacturar con el Objeto Baliza de Parser
    Baliza = Parse.Object.extend("Balizas", {
        /**
         * Instance properties go in an initialize method
         */
        id: '',
        localizacion:  '',
        mac:'',
        marker:'',
        popup:'',
        initialize: function (attr, options) {

        }
    });

    query = new Parse.Query(Baliza);
    subscription = query.subscribe();


    // Subscription for create
    subscription.on('create', function (baliza) {

        // TODO CHANGE THIS
        var beacon = new Baliza({id: baliza.id,  localizacion:  baliza.get("localizacion") , mac: baliza.get("mac"), editando: baliza.get("editando")});

        /*
         var beacon = new Baliza();
        beacon.id = baliza.id;
        beacon.localizacion = baliza.get("localizacion");
        beacon.mac = baliza.get("mac");
        beacon.editando = baliza.get("editando");
        */


        mapBeacons.set(beacon.id,beacon);

        console.log("New beacon added to BBDD")
        console.log(mapBeacons)

    });

    // Subscription for update
    subscription.on('update', function (kk) {
        console.log('Updated beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude  + " " + kk.get("mac")+ " " + kk.get("id"));
    });

    // Subscription for delete
    subscription.on('delete', function (kk) {
        mapBeacons.delete(kk.id);
        console.log('Deleted beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude  + " " + kk.get("mac"));
        console.log(mapBeacons)
    });

    loadAllBeacons();

    $(document).on('click', '.btn-add', function(e) {
        addNewBeacon();
    }).on('click', '.btn-remove', function(e) {
        removeBeacon();
        return false;
    }).on('click', '.btn-modify', function(e) {
        modifyBeacon();
    });

});

解析 LiveQuery 订阅总是收到旧版本

Parse LiveQuery Subscription always receive the old version

parse-platform

parse-javascript-sdk

parse-server