主窗口与模态框信息处理及Person模型交互设计技术问询

Hey there! Let's walk through your questions with practical, REST-aligned solutions and frontend best practices:

1. Return single fields to main window, or just UID for backend lookup? #

The answer depends on your frontend's needs and data consistency requirements:

• If your main page only needs a specific field (e.g., just the full name for display), returning that single field directly cuts down on extra API calls and keeps things lightweight.
• If you need full, up-to-date Person data later (or want to avoid stale data), returning just the UID and having the main window fetch the complete record from the backend is better. This ensures you're always using the latest data from your system, which is critical if Person records are updated frequently.
• Pro tip: If you're unsure, go with the UID approach—it's more flexible for future changes (e.g., if you later need additional Person fields on the main page).

2. Should I avoid merging initial query results in table rows if returning single fields? #

Merging display content (like name + address) in your table rows is totally fine for user experience—users need context to pick the right person. The key is don't rely on parsing the DOM text to extract your target field. Instead, store the raw data you need directly in the DOM using data-* attributes. For example:

<tr data-person-uid="12345" data-person-fullname="Doe/John">
  <td><input type="radio" name="selectPersonRadio"></td>
  <td>Doe/John<p class="text-secondary">123 Main St</p></td>
</tr>

This way, even if you change how you display the data later, you can still easily grab the exact field or UID you need without messy string parsing.

3. Is passing only the UID when submitting the Person model a good design? #

It depends on what your submit action is doing:

• If you're associating an existing Person (e.g., linking a Person to another record like a booking), passing just the UID is excellent REST design—it follows the principle of referencing existing resources instead of duplicating data.
• If you're creating a new Person record (even if it's based on a queried person), passing only the UID works only if your backend is set up to automatically fetch and populate the full Person data from that UID. If not, you'll need to send the required fields (or the full record) to ensure the new entry is complete.
• Also, consider permissions: Make sure your frontend has the right to fetch the full Person data via UID if needed, and that the backend accepts UID-only submissions for your use case.

Better Data Storage for Results Table #

Your current approach of appending HTML directly works, but it makes managing and accessing the underlying data hard. Here's a cleaner pattern:

1. Store the full query results in a frontend array (keeps data separate from the DOM)
2. Generate table rows from the array, attaching data-* attributes to link rows to their corresponding data
3. Retrieve the data directly from the array when a user selects a row

Example code:

// Assume this is your backend response
const apiResults = [
  { uid: "1", surname: "Doe", firstname: "John", address: { formattedAddress: "123 Main St" } },
  { uid: "2", surname: "Smith", firstname: "Jane", address: { formattedAddress: "456 Oak Ave" } }
];

// Transform and store results in a reusable array
const personResults = apiResults.map(result => ({
  uid: result.uid,
  fullName: [result.surname, result.firstname].filter(Boolean).join('/'),
  address: result.address.formattedAddress
}));

// Render table from the array
$('#tablePersonResponse').empty();
personResults.forEach(person => {
  const row = `
    <tr data-uid="${person.uid}">
      <td><input type="radio" name="selectPersonRadio" value="${person.uid}"></td>
      <td>${person.fullName}<p class="text-secondary">${person.address}</p></td>
    </tr>
  `;
  $('#tablePersonResponse').append(row);
});

// Handle selection
$('input[name="selectPersonRadio"]').on('change', function() {
  const selectedUid = $(this).val();
  const selectedPerson = personResults.find(p => p.uid === selectedUid);
  
  // Now you have full access to the selected person's data
  console.log("Selected person:", selectedPerson);
  // Pass UID or specific fields to main window as needed
});

This method makes it easy to update, filter, or sort results later, and avoids bugs from parsing text out of DOM elements.

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