Select options obtained via ajax and unmap issue - forms

Question

I don't see any examples linking a form using select elements with options obtained via ajax. I am wanting to initialize a view model property via ajax in order to populate some select lists in my view and data-link the selected id from my model data. I don't need these arrays when doing an .unmap() of compiled view model because I don't want to send the large lists back to the server when updating the model. So, let's say I have data with ProjectID, ProjectDescription, ProjectTypeID, ProjectPriorityID. In my view model, I need to get via ajax a list of ProjectTypes and ProjectPriorities and use them in my view so that I can select the value from a list. I'm not sure how to achieve this without getting the lists as part of the data when doing .unmap() to send it back to the server.
If there is a property for "ProjectTypes" or "ProjectPriorites" in my view model, they always become part of the data when calling .unmap().
Thank you

Answer 1

There are different alternative approaches. One is to have a single model that includes both 'secondary data' - such as all the ProjectTypes - which will not change dynamically, and the 'primary data' which can get updated based on user input. In that case when you get plain JSON data back from the VM hierarchy using unmap() you can 'prune' it and send only the relevant 'primary' parts back the server.
Another approach is to keep the primary and secondary data separate - so the model is just the 'primary' data, and the secondary data is separate - for example, passed in as a helper:
// Instantiate View Models
var appVm = $.views.viewModels.MyModel.map(modelData);
var typesVm = $.views.viewModels.MyTypes.map(typeData);
$.templates("#appTemplate").link("#page", appVm, {types: typesVm});
<select data-link="typeId()"><
{^{for ~types.projectTypes()}}
<option value="{{:id()}}">{{:label()}}</option>
{{/for}}
</select>
You can also choose not to compile View Models for the secondary data, if it is basically 'static', and do:
$.templates("#appTemplate").link("#page", appVm, {types: typesData});
<select data-link="typeId()"><
{^{for ~types.projectTypes}}
<option value="{{:id}}">{{:label}}</option>
{{/for}}
</select>
Another approach is to only send back to the server any data values or array that have actually changed, for example by using a CRUD/REST web service approach server updates. In that case you would need to have code that diffs the data, or use observe or observeAll to respond to incremental changes...