[SalesForce] Forcing a refresh in force:recordData

There is some description of targetFields in the Lightning Data Service (Beta) release notes:

force:recordData includes a new attribute called targetFields, which is populated with a simplified view of the record’s fields. targetFields is automatically updated whenever Lightning Data Service detects a record change. v.targetFields.Name is equivalent to v.targetRecord.fields.Name.value. A simple way to update force:recordPreview usage to force:recordData is to change references from targetRecord to targetFields.

So its worth setting up this attribute so you have a more convenient way to reference the fields in your component e.g.:

v.targetFields.Name 

instead of:

v.targetRecord.fields.Name.value

so getting rid of .fields and .value that would otherwise have to be present in every reference in the markup. Essentially force:recordData is keeping two JavaScript data structures in sync for you, where the targetFields one is generally easier and cleaner to use in the component markup.

(And it also makes replacing force:recordPreview with force:recordData simple.)

PS

Mohith's comment on your question contains a key point that I didn't know that makes things clearer: "Recommend using targetFields and you can drop the targetRecord". So the point is that targetRecord is only there for backward compatibility and new code is best written using targetFields only. Suggest you prompt him to post that as an answer and accept that answer instead.

So I had a great conversation with Kris Gray about this issue, and the core problem I was hitting is that the initial creation of my component is happening asynchronously because it has to retrieve the definition from the server. After that, it has the definition in the local cache, so it will happen synchronously.

In order to handle that possibility, he suggested I change my code to set the body variable of the component directly, rather than use a local variable. That way, it doesn't matter when they component creation is completed - it will just appear in the component body once the callback is completed.

The difference is pretty subtle, but it did mean I could remove the aura-dependency tag and it still worked. More generally, the big takeaway for me was more actions that I realized were happening async and I need to do a better job of handling that possibility

1. retrieve the body of the div from the parent component we are updating and set to empty so we can refresh when parent selector changes

  var parentCmp = component.find("newLists");
  parentCmp.set("v.body", []);

             $A.createComponent(
            "c:ProgramListSelector",
            {
                "program" : programsToDisplay[y],
                "programMap" : component.get("v.programMap")

            },
            function(newListCMP, status, errorMessage){
                //Add the new component to the body array
                if (status === "SUCCESS") {

Get the body of the parent body into a local variable and update that var directly

               var localBody = parentCmp.get("v.body");
                localBody.push(newListCMP);

Now set the body of parent to the local var instead of just adding it to a local variable and adding it at the end

                    parentCmp.set("v.body", localBody);
                }