如何在Marionette Javascript中进行异步调用ajax

Question

在我的前端应用程序 javascript 中，当单击一个按钮时，我使用此调用 ajax 将数据发送到后面：

submit: function(e){
e.preventDefault();
var formData = $('form').serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {}); // mettre sous format json compréhensible
var coords = this.map.drawLayer
if (typeof(coords) == 'undefined') {
console.log('dessinez qqch')
}
else {
console.log('le traitement commence');
formData['coords'] = coords.getLatLngs();
$.ajax({
url: 'http://127.0.0.1/api/getFormData',
data: JSON.stringify(formData) ,
contentType: "application/json",
type: 'POST',
success: function(response) {
window.location.reload();
console.log(response);
},
error: function(error) {
console.log(error);
}
})};
},

此代码位于搜索视图中.js

我在传单视图中有一个另一个调用 ajax.js它在治疗后从后面收集数据，这个调用 ajax ：

$.ajax({
url:'http://127.0.0.1/api/ndviAuto',
success: function(data){
console.log("les données ont été récupérées");
// console.log(data);
_this.mymap.setView([data[0]['coords_center']['lat'], data[0]['coords_center']['lng']], 12);
var mapDataLayer = L.geoJson(data,{
pointToLayer: function (feature, latlng) {
return  L.polygon(latlng);
}}).addTo(_this.mymap);
}
});

我希望这个调用 ajax 仅在执行第一个调用时才执行，我知道我必须使用 $。Deferred((，但我不太明白它是如何工作的。

传单视图在搜索视图中创建如下：

onShow: function(options) {
this.map = new LeafletView();
this.testCarte.show(this.map);
}

Answer 1

in leafletView.js

setActionAllowed: function(allowed){
this.actionAllowed = allowed;
}
if(this.actionAllowed){
$.ajax({
url:'http://127.0.0.1/api/ndviAuto',
success: function(data){
console.log("les données ont été récupérées");
// console.log(data);
_this.mymap.setView([data[0]['coords_center']['lat'], data[0]['coords_center']['lng']], 12);
var mapDataLayer = L.geoJson(data,{
pointToLayer: function (feature, latlng) {
return  L.polygon(latlng);
}}).addTo(_this.mymap);
}
});
}

在搜索视图中.js

submit: function(e){
var self = this;
e.preventDefault();
var formData = $('form').serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {}); // mettre sous format json compréhensible
var coords = this.map.drawLayer
if (typeof(coords) == 'undefined') {
console.log('dessinez qqch')
}
else {
console.log('le traitement commence');
formData['coords'] = coords.getLatLngs();
$.ajax({
url: 'http://127.0.0.1/api/getFormData',
data: JSON.stringify(formData) ,
contentType: "application/json",
type: 'POST',
success: function(response) {
window.location.reload();
console.log(response);
//sets allowed value
self.map.setActionAllowed(true);
},
error: function(error) {
console.log(error);
//sets allowed value
self.map.setActionAllowed(false);
}
})};
},

Answer 2

通常有两种方法可以实现您想要的。如果两个视图具有某种连接，例如父/子或兄弟姐妹连接，则可以在一个视图中定义方法，并在另一个视图中引用它。像这样：

// parent/child
const parent = marionette.View.extend({
// ...
doSth1() {
$.ajax({
// ...
});
},
onRender() {
this.getRegion('whatever').show(new child({doSth1: this.doSth1.bind(this)}));
}
});
const child = marionette.View.extend({
doSth2() {
const self = this;
$.ajax({
// ...
success() {
this.options.doSth1();
}
});
}
});

遵循相同的模式，您可以为其他连接(如兄弟姐妹或父/子(实现它，但具有反向控制流，例如子项的父调用方法。虽然这种方法可以完成这项工作，但我认为只有将其应用于具有父级子调用功能的单级父/子才能。原因是如果适用于其他情况，代码可能很容易变得不可维护。

另一种方法是使用骨干事件或骨干无线电。在这种情况下，这些是我的首选方法。使用主干无线电的示例：

const Radio = require('backbone.radio');
const ajaxChannel = Radio.channel('ajax');
const view1 = marionette.View.extend({
initialize() {
this.listenTo(ajaxChannel, 'getSth', () => {
$.ajax({
// ...
})
});
}
});
const view2 = marionette.View.extend({
postSth() {
$.ajax({
// ...
success() {
ajaxChannel.trigger('getSth')
}
});
}
});

Answer 3

您可以在searchView中导出状态.js并在leafletView.js中导入，如下所示

搜索视图.js

state = false
success:function(){
state = true
}
export state

传单查看.js

import {state} from 'searchView.js'
if(state){
$.ajax(...)
}