Fatal编程技术网
  • parse-platform/
  • Parse platform 解析LiveQuery订阅始终接收旧版本

Parse platform 解析LiveQuery订阅始终接收旧版本

parse-platform

Parse platform 解析LiveQuery订阅始终接收旧版本,parse-platform,parse-server,parse-javascript-sdk,Parse Platform,Parse Server,Parse Javascript Sdk,我有一组要在地图上显示的信标。我希望它们的位置在应用程序的所有实例之间同步 也就是说，当我将信标移动到另一个位置时，我希望此更改反映在应用程序的其他实例中 这将使用其1.11.0版中的解析javascript SDK 我定义了以下解析模型，它表示保存在服务器上的集合中的每个对象： var Baliza = Parse.Object.extend("Balizas"); Baliza.prototype.show = function(){ var self =

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

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

这将使用其1.11.0版中的解析javascript SDK

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

    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);


    };
订阅创建如下：

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"));
});
每次单击地图上的某个位置时，我都会创建一个信标，如下所示：

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);
            }
        });
当前注册的“信标”列表如下所示：

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);
            }
        });

query.find({
成功：功能（结果）{
log（“总平衡->”+结果.length）；
对于（var i=0；i”，currentBaliza）；
currentBaliza.show（）；
mapabaliza.set（currentBaliza.id，currentBaliza）；
}
},
错误：函数（错误）{
console.log（“错误：+Error.code+”+Error.message）；
}
});
问题在于，例如，如果我将信标从位置（纬度：40.961229844235234，经度：-5.669621229171753）移动到地图中的另一点（纬度：40.9604196476232，经度：-5.6707102060318）

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

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

提前感谢。

我一直在用最小配置进行一些测试，我看到：

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

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");
在我的测试中，如果使用第一个代码，信标将正常更新，但如果使用第二个代码，则会在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
添加信标
修改信标
移除信标
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();
    });

});

var-mapBeacons=newmap（）；
var查询；
var认购；
瓦尔·巴利扎；
函数loadAllBeacons（）{
查询.查找({
成功：功能（结果）{
对于（var i=0；i