UI5 JS按鈕更新表

Question

我是新來的UI5和JS，並試圖在WebIDE中練習開發UI5應用程序。

在這種情況下，我在XML中查看了一個由JSON模塊填充的表。有按鈕的輸入很少。我想將輸入的值添加到表中的字段（並更新該JSON模塊）。 感謝您的任何指導或幫助。

我得到了錯誤 - 無法讀取屬性'推'未定義 var newBp = oModel.getProperty（「/ hosesMbh」）;

月

sap.ui.controller("com.sapx05.view.View1", { 
onInit: function() { 
    var oData = { 
     "hosesMbh": [{ 
      "orderNumber": "1275043", 
      "materialNumber": "6460000214", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275044", 
      "materialNumber": "6442041132", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275083", 
      "materialNumber": "6460000219", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275088", 
      "materialNumber": "6460000229", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275089", 
      "materialNumber": "6460000239", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }] 
    }; 
    var JSONModel = new sap.ui.model.json.JSONModel(oData); 
    JSONModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay); 
    sap.ui.getCore().setModel(JSONModel); 

    var XMLModel = new sap.ui.model.xml.XMLModel(); 
     $.get("data.xml", function(data) { 
      XMLModel.setXML(data); 
      sap.ui.getCore().setModel(XMLModel,"xml"); 
     }, "text"); 
}, 

onBtnClickAdd: function(oData, JSONModel) { 
    var oModel = new sap.ui.model.json.JSONModel(); 
     oModel.loadData("/hosesMbh"); 
    var newBp = oModel.getProperty("/hosesMbh"); 
    var addOrder = { 
      orderNumberAdd: this.getView().byId("orderNumberAdd").getValue(), 
      materialNumberAdd: this.getView().byId("materialNumberAdd").getValue(), 
      amountOrderedAdd: this.getView().byId("amountOrderedAdd").getValue(), 
      amountProducedAdd: this.getView().byId("amountProducedAdd").getValue(), 
      openAmountAdd: this.getView().byId("openAmountAdd").getValue() 
    }; 
    newBp.push(addOrder); 
    JSONModel.setProperty("/hosesMbh", newBp); 
} 
}); 

Answer 1

你創建你onBtnClickAdd mehtod一個新的JSON模式沒有任何數據。因此此型號不包含屬性/hosesMbh。相反，您應該從onInit方法中創建的核心中獲取模型。

onBtnClickAdd: function(oData, JSONModel) { 
    var oModel = sap.ui.getCore().getModel(); 
    oModel.loadData("/hosesMbh"); 
    var newBp = oModel.getProperty("/hosesMbh"); 
    var addOrder = { 
     orderNumberAdd: this.getView().byId("orderNumberAdd").getValue(), 
     materialNumberAdd: this.getView().byId("materialNumberAdd").getValue(), 
     amountOrderedAdd: this.getView().byId("amountOrderedAdd").getValue(), 
     amountProducedAdd: this.getView().byId("amountProducedAdd").getValue(), 
     openAmountAdd: this.getView().byId("openAmountAdd").getValue() 
    }; 
    newBp.push(addOrder); 
    oModel.setProperty("/hosesMbh", newBp); 
} 

Answer 2

謝謝，第一個答案幫助我通過誤差傳遞與 newBp.push(addOrder);

，但仍然改變模型（oModel）oModel.setProperty("/hosesMbh", newBp); 不會將6號線（從場）表。我認爲活動模型仍然是在oninit期間創建的JSONModel。

注：與第一篇文章相比，我添加了第二個表格。

sap.ui.define([ 
"sap/ui/core/mvc/Controller", 
"sap/ui/table/Table", 
"sap/m/Label", 
"sap/m/Input"], 
function(Controller,Table,Label,Input) { 
"use strict"; 
return Controller.extend("com.sapx05.view.View1", { 
onInit: function() { 
    var oData = { 
     "hosesMbh": [{ 
      "orderNumber": "1275043", 
      "materialNumber": "6460000214", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275044", 
      "materialNumber": "6442041132", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275083", 
      "materialNumber": "6460000219", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275088", 
      "materialNumber": "6460000229", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }, { 
      "orderNumber": "1275089", 
      "materialNumber": "6460000239", 
      "amountOrdered": "640m", 
      "amountProduced": "200m", 
      "openAmount": "440m" 
     }]}; 
var JSONModel = new sap.ui.model.json.JSONModel(oData); 
JSONModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay); 
this.getView().setModel(JSONModel); 
sap.ui.getCore().setModel(JSONModel); 

var XMLModel = new sap.ui.model.xml.XMLModel(); 
$.get("data.xml", function(data) { 
XMLModel.setXML(data); 
sap.ui.getCore().setModel(XMLModel,"xml"); 
}, "text"); 
}, 
onBtnClickAdd: function(oData,JSONModel) { 
// user table - newly created by button click 
var oTable = new sap.ui.table.Table({ 
    title : "Table 2", 
    width : "100%", 
    visibleRowCount : 7 
}); 
oTable.addColumn(new sap.ui.table.Column({ 
    label: new sap.m.Label({text: "Order number"}), 
    template: new sap.m.Input({value:"{orderNumber}"}) 
})); 
oTable.addColumn(new sap.ui.table.Column({ 
    label: new sap.m.Label({text: "Material number"}), 
    template: new sap.m.Input({value:"{materialNumber}"}) 
})); 
oTable.addColumn(new sap.ui.table.Column({ 
    label: new sap.m.Label({text: "Amount Ordered"}), 
    template: new sap.m.Input({value:"{amountOrdered}"}) 
})); 
oTable.addColumn(new sap.ui.table.Column({ 
    label: new sap.m.Label({text: "Amount produced"}), 
    template: new sap.m.Input({value:"{amountProduced}"}) 
})); 
oTable.addColumn(new sap.ui.table.Column({ 
    label: new sap.m.Label({text: "Open amount"}), 
    template: new sap.m.Input({value:"{openAmount}"}) 
})); 
oTable.bindRows("/hosesMbh"); 
oTable.placeAt("content"); 
//table is created and populated 
//fields for values to be added 
var oModel = sap.ui.getCore().getModel(JSONModel); 
    oModel.loadData("/hosesMbh"); 
    sap.ui.getCore().setModel(oModel); 

var newBp = oModel.getProperty("/hosesMbh"); 

this.getView().byId("orderNumberAdd").setValue("12345"); 
this.getView().byId("materialNumberAdd").setValue("6460000223"); 
this.getView().byId("amountOrderedAdd").setValue("640m"); 
this.getView().byId("amountProducedAdd").setValue("440m"); 
this.getView().byId("openAmountAdd").setValue("200m"); 

var addOrder = { 
      orderNumberAdd: this.getView().byId("orderNumberAdd").getValue(), 
      materialNumberAdd: this.getView().byId("materialNumberAdd").getValue(), 
      amountOrderedAdd: this.getView().byId("amountOrderedAdd").getValue(), 
      amountProducedAdd: this.getView().byId("amountProducedAdd").getValue(), 
      openAmountAdd: this.getView().byId("openAmountAdd").getValue() 
     }; 
    newBp.push(addOrder); 
//newBp contains 5 lines of original /hosesMbh content and also 6th line from fields  
    sap.ui.getCore().setModel(oModel); 
    oModel.setProperty("/hosesMbh", newBp); 
//model is updated i guess (no error occured in chrome debugger) 
//but content of tables they have bound rows to /hosesMbh was not changed 
} 
});});