javascript - SAPUI5仅更新特定绑定(bind)

Question

在 SAPUI5 中，我有一个充满元数据的模型(“sModel”)。

在此模型中，我有一个属性“/aSelectedNumbers”。

我还有一个面板，我想根据“/aSelectedNumbers”属性的内容更改其可见性。

更新

第一个 Controller :

var oModelMeta = cv.model.recycleModel("oModelZAPRegistratieMeta", that);

//the cv.model.recycleModel function sets the model to the component 
//if that hasn't been done so already, and returns that model. 
//All of my views are added to a sap.m.App, which is returned in the 
//first view of this component.

var aSelectedRegistratieType = [];
var aSelectedDagdelen = ["O", "M"];
oModelMeta.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);
oModelMeta.setProperty("/aSelectedDagdelen", aSelectedDagdelen);

第一个面板(其中有控制相关数组的复选框):

sap.ui.jsfragment("fragments.data.ZAPRegistratie.Filters.RegistratieTypeFilter", {

  createContent: function(oInitData) {

var oController = oInitData.oController;
var fnCallback = oInitData.fnCallback;
var oModel = cv.model.recycleModel("oModelZAPRegistratieMeta", oController);

var oPanel = new sap.m.Panel( {
  content: new sap.m.Label( {
    text: "Registratietype",
    width: "120px"
  })
});

function addCheckBox(sName, sId) {
  var oCheckBox = new sap.m.CheckBox( {
    text: sName,
    selected: {
      path: "oModelZAPRegistratieMeta>/aSelectedRegistratieType",
      formatter: function(oFC) {
        if (!oFC) { return false; }
        console.log(oFC);
        return oFC.indexOf(sId) !== -1;
      }
    },
    select: function(oEvent) {
      var aSelectedRegistratieType = oModel.getProperty("/aSelectedRegistratieType");
      var iIndex = aSelectedRegistratieType.indexOf(sId);

      if (oEvent.getParameters().selected) {
        if (iIndex === -1) {
          aSelectedRegistratieType.push(sId);
          oModel.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);
        }
      } else {
        if (iIndex !== -1) {
          aSelectedRegistratieType.splice(iIndex, 1);
          oModel.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);

        }
      }
      // arrays update niet live aan properties
    oModel.updateBindings(true); //******** <<===== SEE HERE
    if (fnCallback) {
      fnCallback(oController);
    }
  },
  width: "120px",
  enabled: {
    path: "oModelZAPRegistratieMeta>/bChanged",
    formatter: function(oFC) {
      return oFC !== true;
    }
  }
  });
  oPanel.addContent(oCheckBox);
}

addCheckBox("Presentielijst (dag)", "1");
addCheckBox("Presentielijst (dagdelen)", "2");
addCheckBox("Uren (dagdelen)", "3");
addCheckBox("Tijd (dagdelen)", "4");

    return oPanel;

  }
});

这是问题中提到的可见性面板。请注意，它在 oModel.updateBindings(true) 之后起作用(请参阅上面代码中的注释)，但否则它不会相应更新。

sap.ui.jsfragment("fragments.data.ZAPRegistratie.Filters.DagdeelFilter", {

  createContent: function(oInitData) {

    var oController = oInitData.oController;
    var fnCallback = oInitData.fnCallback;
    var oModel = cv.model.recycleModel("oModelZAPRegistratieMeta", oController);

    var oPanel = new sap.m.Panel( {
      content: new sap.m.Label( {
        text: "Dagdeel",
        width: "120px"
      }),
      visible: {
        path: "oModelZAPRegistratieMeta>/aSelectedRegistratieType",
        formatter: function(oFC) {
          console.log("visibility");
          console.log(oFC);
          if (!oFC) { return true; }
          if (oFC.length === 0) { return true; }
          return oFC.indexOf("2") !== -1;
        }
      }
    });

    console.log(oPanel);

    function addCheckBox(sName, sId) {
      var oCheckBox = new sap.m.CheckBox( {
        text: sName,
        selected: {
          path: "oModelZAPRegistratieMeta>/aSelectedDagdelen",
          formatter: function(oFC) {
            if (!oFC) { return false; }
            console.log(oFC);
            return oFC.indexOf(sId) !== -1;
          }
        },
        select: function(oEvent) {
          var aSelectedDagdelen = oModel.getProperty("/aSelectedDagdelen");
          var iIndex = aSelectedDagdelen.indexOf(sId);

          if (oEvent.getParameters().selected) {
            if (iIndex === -1) {
              aSelectedDagdelen.push(sId);
              oModel.setProperty("/aSelectedDagdelen", aSelectedDagdelen);
            }
          } else {
            if (iIndex !== -1) {
              aSelectedDagdelen.splice(iIndex, 1);
              oModel.setProperty("/aSelectedDagdelen", aSelectedDagdelen);
            }
          }
          if (fnCallback) {
            fnCallback(oController);
          }
        },
        enabled: {
          path: "oModelZAPRegistratieMeta>/bChanged",
          formatter: function(oFC) {
            return oFC !== true;
          }
        },
        width: "120px"
      });
      oPanel.addContent(oCheckBox);
    }

    addCheckBox("Ochtend", "O", true);
    addCheckBox("Middag", "M", true);
    addCheckBox("Avond", "A");
    addCheckBox("Nacht", "N");

    return oPanel;

  }
});

Answer 1

模型不触发更改事件的原因是对数组的引用没有更改。

更改该值的一种可能方法是每次从模型中读取它时创建一个新数组:

var newArray = oModel.getProperty("/aSelectedNumbers").slice();
// do your changes to the array
// ...
oModel.setProperty("/aSelectedNumbers", newArray);

这个JSBin说明了这个问题。