能否将两个模型绑定到一个控件？StandardTile双数据填充问题

这种情况我之前也遇到过，核心问题在于如果直接用多个未命名的XMLModel，后面的模型会覆盖掉前面的默认模型，导致你看到重复的数字。这里提供两种靠谱的解决方案，你可以根据自己的习惯选择：

方案一：用单个JSONModel统一管理数据（推荐） #

这种方式更灵活，把两个接口返回的数字都存在一个JSONModel里，绑定的时候直接指定不同的字段路径就行，不会冲突。

步骤1：初始化JSONModel并绑定到视图 #

在控制器的onInit方法里创建一个空的JSONModel，给它起个名字方便后续绑定：

onInit: function () {
  // 创建存储两个数字的JSONModel
  const oTileDataModel = new sap.ui.model.json.JSONModel({
    firstNumber: 0, // 初始化默认值
    secondNumber: 0
  });
  // 给模型起个唯一名称，避免和其他模型冲突
  this.getView().setModel(oTileDataModel, "tileData");

  // 发起两次SOAP请求
  this.fetchSOAPData("param1").then(num1 => {
    oTileDataModel.setProperty("/firstNumber", num1);
  }).catch(err => {
    console.error("获取第一个数字失败：", err);
  });

  this.fetchSOAPData("param2").then(num2 => {
    oTileDataModel.setProperty("/secondNumber", num2);
  }).catch(err => {
    console.error("获取第二个数字失败：", err);
  });
}

步骤2：封装SOAP请求方法 #

把SOAP调用封装成Promise，方便处理异步逻辑：

fetchSOAPData: function (param) {
  return new Promise((resolve, reject) => {
    // 构建你的SOAP请求XML，根据实际服务调整
    const soapRequest = `<?xml version="1.0" encoding="utf-8"?>
      <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
        <soap:Body>
          <YourServiceMethod>
            <YourParam>${param}</YourParam>
          </YourServiceMethod>
        </soap:Body>
      </soap:Envelope>`;

    $.ajax({
      url: "你的SOAP服务地址",
      type: "POST",
      contentType: "text/xml; charset=utf-8",
      data: soapRequest,
      dataType: "xml",
      success: (response) => {
        // 解析SOAP响应，提取你需要的数字（根据实际响应结构调整）
        const numberText = $(response).find("YourResponseNumberNode").text();
        resolve(parseInt(numberText, 10)); // 转成数字类型
      },
      error: (error) => {
        reject(error);
      }
    });
  });
}

步骤3：视图里绑定属性 #

在XML视图的StandardTile中，通过模型名称指定绑定路径：

<StandardTile
  title="自定义标题"
  number="{tileData>/firstNumber}"
  numberUnit="{tileData>/secondNumber}"
/>

方案二：使用命名的XMLModel #

如果你还是想用XMLModel，记得给每个模型起不同的名称，绑定的时候明确指定模型名，就不会覆盖了：

控制器代码 #

onInit: function () {
  // 第一个XMLModel，获取第一个数字
  const oModel1 = new sap.ui.model.xml.XMLModel();
  this.getView().setModel(oModel1, "model1");
  oModel1.loadData(
    "你的SOAP服务地址",
    this.buildSOAPRequest("param1"), // 构建带param1的请求XML
    true,
    "POST",
    false,
    false,
    { "Content-Type": "text/xml; charset=utf-8" }
  );

  // 第二个XMLModel，获取第二个数字
  const oModel2 = new sap.ui.model.xml.XMLModel();
  this.getView().setModel(oModel2, "model2");
  oModel2.loadData(
    "你的SOAP服务地址",
    this.buildSOAPRequest("param2"), // 构建带param2的请求XML
    true,
    "POST",
    false,
    false,
    { "Content-Type": "text/xml; charset=utf-8" }
  );
}

// 构建SOAP请求的方法，和方案一类似
buildSOAPRequest: function (param) {
  return `<?xml version="1.0" encoding="utf-8"?>
    <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
      <soap:Body>
        <YourServiceMethod>
          <YourParam>${param}</YourParam>
        </YourServiceMethod>
      </soap:Body>
    </soap:Envelope>`;
}

视图绑定 #

<StandardTile
  title="自定义标题"
  number="{model1>/YourResponseRoot/NumberNode}"
  numberUnit="{model2>/YourResponseRoot/NumberNode}"
/>

两种方案里，方案一的JSONModel方式更推荐，因为它的结构更直观，后续如果要扩展其他数据也更方便，而且单个模型管理起来更简单。

内容的提问来源于stack exchange，提问作者Marco Hernández