SAPUI5 Planning Calendar无法在XML视图中绑定模型预约

Hey there, let's work through this binding issue with your SAPUI5 Planning Calendar! I’ve dealt with similar scenarios before, so here’s a step-by-step breakdown to get your model connected properly in the XML view instead of relying on hardcoded controller data.

First, you need to make sure your JSON model is initialized and attached to your view (or component for global access) so the XML can reference it. If you’re using static data like the official example, adjust your controller code to structure it properly and assign a named model (this avoids conflicts with other models):

// In your controller's onInit method
const oPlanningModel = new JSONModel();
// Populate your data (match the structure the Planning Calendar expects)
oPlanningModel.setData({
  startDate: new Date("2017", "0", "08", "8", "0"),
  people: [
    {
      name: "John Miller",
      appointments: [
        {
          start: new Date("2016", "11", "08", "9", "0"),
          end: new Date("2016", "11", "08", "10", "30"),
          title: "Team Sync",
          type: "Type01"
          // Add any other required appointment properties here
        }
        // Add more people/appointments as needed
      ]
    }
  ]
});
// Attach the model to your view (use a name like "planningData" for clarity)
this.getView().setModel(oPlanningModel, "planningData");

Now you can reference the named model directly in your XML bindings. The key is matching the model’s structure to the Planning Calendar’s row and appointment templates:

<PlanningCalendar
  startDate="{planningData>/startDate}"
  rows="{planningData>/people}"
  appointmentSelect="onAppointmentSelect">
  <!-- Define the template for each person row -->
  <rows>
    <PlanningCalendarRow
      title="{planningData>name}"
      appointments="{path: 'planningData>appointments'}">
      <!-- Define the template for each appointment -->
      <appointments>
        <PlanningCalendarAppointment
          start="{planningData>start}"
          end="{planningData>end}"
          title="{planningData>title}"
          type="{planningData>type}"/>
      </appointments>
    </PlanningCalendarRow>
  </rows>
</PlanningCalendar>

• Named Model References: If you used a named model (like planningData), don’t forget to include it in every binding expression ({planningData>/path}). If you use the default model, you can omit the name ({/path}).
• Date Compatibility: SAPUI5 needs valid Date objects or ISO-formatted strings (e.g., 2016-12-08T09:00:00) for date bindings. If your data comes as plain strings, use a formatter to convert them to valid dates.
• Binding Path Accuracy: Ensure your XML paths exactly match the structure of your JSON model. For example, if your people array is nested under a schedule object, your row binding would be "{planningData>/schedule/people}".
• Timing: Always initialize and attach the model in the controller’s onInit method—this ensures the model is ready before the view renders, so bindings resolve correctly.

If you’re pulling data from an API instead of hardcoding, use the model’s loadData promise to ensure the data is loaded before setting the model:

// In onInit
const oPlanningModel = new JSONModel();
oPlanningModel.loadData("/your-api-endpoint/planning-data")
  .then(() => {
    this.getView().setModel(oPlanningModel, "planningData");
  })
  .catch((error) => {
    console.error("Failed to load planning data:", error);
  });

If you still run into issues, check your browser’s dev console—SAPUI5 usually outputs clear errors for missing binding paths or invalid data types that can point you to the problem.

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