Javascript 删除请求完成后，sap.m.MessageView对话框弹出窗口内未显示内容数据

在我的BLHandleDeleteButtonPressed函数中，我正在对单个/多个选定表行执行删除条目请求。在成功/错误后完成请求后，我希望在对话框sap.m.MessageView中显示一个消息视图，与这里的完全相同

问题是当请求完成时，会弹出消息视图，但它不包含任何数据↓↓↓

以下是示例代码：

displayMsgDialog: function(oDialog) {
    oDialog.open();
},
blHandleDelButtonPressed: function(oEvent) { 
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var oSelectedItems = oTable.getSelectedItems();
    var aBookingRemovals = [];

    oTable.setBusy(true);

    oSelectedItems.forEach(function(selectedItem) {
        var oBooking = selectedItem.getBindingContext();
        var sPath =  oBooking.getPath(),
            sBookId = oBooking.getProperty("bookid"),
            sPassName = oBooking.getProperty("PASSNAME"),
            sCustomId = oBooking.getProperty("CUSTOMID");

        oModel.remove(sPath, {
            success: function(oData, response) {
                aBookingRemovals.push({
                    type: "Success",
                    title: "Booking " + sBookId + " successfully removed",
                    subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                });
            },
            error: function() {
                aBookingRemovals.push({
                    type: "Error",
                    title: "Booking " + selectedItem.getBindingContext().getProperty("bookid") + " wasn't removed",
                    subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                });
            }
        }); 
    });

    oTable.setBusy(false); 

    var oBookingRemovalsTpl = new sap.m.MessageItem({
        type: "{type}",
        title: "{title}",
        subtitle: "{subtitle}"
    });

    var oModelBookingRemovals = new JSONModel();
    oModelBookingRemovals.setData(aBookingRemovals);

    this.oBookingRemovalsView = new sap.m.MessageView({
        showDetailsPageHeader: false,
        items: {
            path: "/",
            template: oBookingRemovalsTpl
        }
    });

    this.oBookingRemovalsView.setModel(oModelBookingRemovals, "BookingRemovals");

    this.oBookingRemovalsDialog = new sap.m.Dialog({
        resizable: true,
        content: this.oBookingRemovalsView,
        state: 'Information',
        beginButton: new sap.m.Button({
            press: function () {
                this.getParent().close();
                oTable.removeSelections();
                aBookingRemovals = []; 
            },
            text: "Close"
        }),
        customHeader: new sap.m.Bar({
            contentMiddle: [
                new sap.m.Text({ text: "We tried to remove selected bookings"})
            ]
        }),
        contentHeight: "300px",
        contentWidth: "500px",
        verticalScrolling: false
    });

    // Displaying the final Message View inside Dialog
    this.displayMsgDialog(this.oBookingRemovalsDialog);
}

浏览器的控制台不显示任何错误/警告

奇怪的是：

在我选择了3个随机行并执行blHandleDelButtonPressed函数后，我在Chrome的控制台中调用了detail.obokingremovalsview.getModelBookingRemovals.getData，这给了我这个↓↓↓ 如您所见，选定行中的数据已插入BookingRemovals模型，并绑定到window.detail.obokingRemovalsView

但是，当我调用detail.oBookingRemovalsView.getItems时，得到了一个空数组↓↓↓

> detail.oBookingRemovalsView.getItems()

   []
      length: 0
      __proto__: Array(0)

---

问题在哪里？

我的解决方案是为每个选定的元素建立承诺。如果所有承诺都已解决，则调用then函数，该函数现在可以从success和error函数访问已解决的对象

blHandleDelButtonPressed: function(oEvent) { 
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var aSelectedItems = oTable.getSelectedItems();
    // var aBookingRemovals = [];

    oTable.setBusy(true);

    // map applies a function to every element of an array 
    // and stores the returned value in a new array
    var aPromises = aSelectedItems.map(function(selectedItem) {
        return new Promise(function(resolve, reject) {

            var oBooking = selectedItem.getBindingContext();
            var sPath =  oBooking.getPath(),
                sBookId = oBooking.getProperty("bookid"),
                sPassName = oBooking.getProperty("PASSNAME"),
                sCustomId = oBooking.getProperty("CUSTOMID");

            oModel.remove(sPath, {
                success: function(oData, response) {
                    // pass the following object to the THEN function
                    resolve({
                        type: "Success",
                        title: "Booking " + sBookId + " successfully removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                },
                error: function() {
                    // pass the following object to the THEN function
                    // when using Promise.all you don't want to use reject
                    // otherwise the resolved promises will get lost
                    resolve({
                        type: "Error",
                        title: "Booking " + selectedItem.getBindingContext().getProperty("bookid") + " wasn't removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                }
            }); 
        });
    });

    Promise.all(aPromises).then(function(aResolvedValues) {
        // aResolvedValues contains all values that have been resolved
        // it should look exactly the same as aBookingRemovals
        // if we got here, all calls have been finished. this is a much better place to call 
        oTable.setBusy(false); 

        // add the rest of the code here
    });

阅读更多关于

阅读更多关于

---

阅读更多关于

您的代码是异步的。在此之后调用success和error.displayMsgDialogthis.obokingremovalsdialog；因为它们是回调。可能不相关，但我建议不要每次执行新的删除操作时都创建新模型——以我的经验，这会给绑定带来问题。最好在这里拆分逻辑。@Marc@pguddi我想知道是否有一个像普通的vanilla JS一样的完成/完成参数？async:false似乎不起作用。使用vanilla js构建您自己的承诺。您可以在成功方法中解决它，并在错误方法中拒绝它谢谢。此外，我还可以简单地使用$AJAX和完整的回调，该回调在成功和出错之后执行。是的，但就个人而言，我不喜欢jQuery，这是另一种依赖

blHandleDelButtonPressed: function(oEvent) { 
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var aSelectedItems = oTable.getSelectedItems();
    // var aBookingRemovals = [];

    oTable.setBusy(true);

    // map applies a function to every element of an array 
    // and stores the returned value in a new array
    var aPromises = aSelectedItems.map(function(selectedItem) {
        return new Promise(function(resolve, reject) {

            var oBooking = selectedItem.getBindingContext();
            var sPath =  oBooking.getPath(),
                sBookId = oBooking.getProperty("bookid"),
                sPassName = oBooking.getProperty("PASSNAME"),
                sCustomId = oBooking.getProperty("CUSTOMID");

            oModel.remove(sPath, {
                success: function(oData, response) {
                    // pass the following object to the THEN function
                    resolve({
                        type: "Success",
                        title: "Booking " + sBookId + " successfully removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                },
                error: function() {
                    // pass the following object to the THEN function
                    // when using Promise.all you don't want to use reject
                    // otherwise the resolved promises will get lost
                    resolve({
                        type: "Error",
                        title: "Booking " + selectedItem.getBindingContext().getProperty("bookid") + " wasn't removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                }
            }); 
        });
    });

    Promise.all(aPromises).then(function(aResolvedValues) {
        // aResolvedValues contains all values that have been resolved
        // it should look exactly the same as aBookingRemovals
        // if we got here, all calls have been finished. this is a much better place to call 
        oTable.setBusy(false); 

        // add the rest of the code here
    });