Refreshing a navigation property in Breeze

Question

Sorry if this is a repeat but I was going through the documentation on Breezejs.com and I wanted to see if I could get a bit of an elaboration on 'best practice'

I am using .extend to load up some navigation properties on a parent object. When I want to add an entity to that observable array I am using a modal pop-up. I see the blank entity added on my view that calls the modal, but when I close the modal after creating the entity and saving the observable array doesn't update and just leaves the main page's new entity blank.

http://www.breezejs.com/documentation/navigation-properties says that using .push() into the Observable array will add the object to the array so just wanted to get an idea whether I am doing this correctly or there is a better method. The reason it seems funny is that I have to return the entity from my modal back to my parent view and then push it, and thought maybe there was a better method.

Edit

From my parent view model, I use Durandal.js's app.js to show a modal.

var addComment = function () {
    rfcommentcreate.responseFormId(responseForm().id());
    app.showModal(rfcommentcreate).then(function (modalResult) {
        if (!modalResult) { datacontext.cancelChanges(); return false; }
        console.log(modalResult);  // Just to make sure the result is not null and of the right type
        responseForm.responseFormResponseFormComments.push(modalResult);
        return true;
    });
};

When I save on the modal I pass the created object back.

    datacontext.saveChanges()
        .fail(initFailed)
        .fin(complete);

    function complete() {
        self.modal.close(responseFormComment());  // responseFormComment is the entity that I work on in the modal
    }

ResponseForm.ResponseFormResponseFormComments is the navigation property of ResponseForm.

The above code adds the entity to Breeze's entity manager but Knockout is not tracking it after it is created. This appears to be a true statement because in my Html on the parent view I see something like this

: @

from the HTML code

<span data-bind="text: user().fullName"></span> : <span data-bind="text: message"></span> @ <span data-bind="DateTime: commentDt"></span>

After I create the entity in the modal

According to the navigation-properties page on breezejs.com that should work if I am interpreting it properly.

A: It does not, and is probably my fault B: Is there a better method to keeping track of navigation properties without having to 'push' them into an array?

Notice that we pushed to Orders and not Orders().

Could you prepare a small sample, preferably in jsFiddle or Plunkr. It's difficult for us to understand the use case w/o the aid of some code. — Ward
Sorry I could not find a good way to post the code I am using in jsFiddle (no Durandal referencing) but I posted some code above that MAY help to show the conundrum. — PW Kad
Ward - do you think it is possible I am breaking knockout's binding when I am creating the comment in the entityManager? For example if I create the comment like this - return manager.createEntity('ResponseFormComment', { responseForm: responseForm, user: user }); like I said it's like KnockOut sees that an entity is made but it's like the binding to the ever so redundant responseFormResponseFormComments is broken — PW Kad

Ward Ward · Accepted Answer · 2013-05-24T02:03:56

There can be timing issues with KO. I know it's kludgy but you might try the following (btw, I changed the name of the function parameter because modalResult is not intuitive to me):

app.showModal(rfcommentcreate).then(function (comment) {
        if (!comment) { datacontext.cancelChanges(); return false; }
        console.log(comment);  // Just to make sure the result is not null and of the right type
        responseForm.responseFormResponseFormComments.push(comment);
        return Q.delay(true,5); // return true after 5 ms to get another JS event loop cycle in.
    });

My suggestion is in the last line:

return Q.delay(true,5); // return true after 5 ms to get another JS event loop cycle in.

See the Q.delay method in the Q API reference. What I'm doing is giving KO a chance to hear the event raised by Breeze's update of the array and respond accordingly.

If there is a back navigation from ResponseFormComment to ResponseForm, don't think I would push into the navigation property (is it really called responseFormResponseFormComments? "responseForm" twice?), not that there is anything wrong with that.

I'd rather write:

comment.responseForm(responseForm); // entity assignment

or

comment.responseFormId(responseForm.id); // foreign key assignment

Both have the intended side-effect of updating the responseForm's comments collection.

But back to the main issue ... try the delay and let us know if that works. Sometimes KO and Breeze get their timing mixed up.

Refreshing a navigation property in Breeze

3 Answers