如何在SAP UI5按钮点击事件中向JSONModel添加对象

嘿，我明白你想在按钮点击事件里给manifest中配置的JSONModel添加新对象，不过直接用data.push()的方式可能不会达到预期效果——因为UI5的JSONModel内部的data属性并不是设计用来直接修改的，直接改它的话，模型不会感知到数据变化，UI也不会自动刷新。

下面是正确的实现步骤，完全符合UI5的最佳实践：

正确的代码示例 #

假设你的Invoices.json根结构是一个数组（比如[{...}, {...}]），可以这样写按钮点击事件的处理函数：

onAddInvoice: function() {
  // 1. 获取invoice模型实例
  const oInvoiceModel = this.getOwnerComponent().getModel("invoice");
  
  // 2. 获取当前模型中的所有发票数据（根路径"/"对应整个数组）
  const aCurrentInvoices = oInvoiceModel.getProperty("/");
  
  // 3. 定义你要添加的新对象
  const oNewInvoice = {
    ProductName: "新商品",
    Quantity: 2,
    Price: 49.99,
    // 其他你需要的字段...
  };
  
  // 4. 把新对象添加到数组中
  aCurrentInvoices.push(oNewInvoice);
  
  // 5. 将更新后的数组设置回模型，触发UI绑定刷新
  oInvoiceModel.setProperty("/", aCurrentInvoices);
}

特殊情况处理：如果模型根是包含数组的对象 #

如果你的Invoices.json结构是这样的（根是对象，内部包含发票数组）：

{
  "invoiceList": [
    // 现有发票数据
  ]
}

那你只需要调整获取和设置数据的路径即可：

onAddInvoice: function() {
  const oInvoiceModel = this.getOwnerComponent().getModel("invoice");
  // 从"/invoiceList"路径获取数组
  const aCurrentInvoices = oInvoiceModel.getProperty("/invoiceList");
  
  const oNewInvoice = {/* 新对象数据 */};
  aCurrentInvoices.push(oNewInvoice);
  
  // 将更新后的数组设置回"/invoiceList"路径
  oInvoiceModel.setProperty("/invoiceList", aCurrentInvoices);
}

为什么不直接用data.push()？ #

UI5的模型依赖官方API来跟踪数据变化，直接修改data属性属于绕过模型的内部机制，会导致：

• UI绑定不会自动更新，用户看不到新添加的数据
• 可能破坏模型的内部状态，引发后续的未知问题

所以一定要通过getProperty()获取数据，修改后再用setProperty()设置回去，这样模型会自动触发数据变更事件，UI也会同步刷新。

内容的提问来源于stack exchange，提问作者Youssra Saoudi