Handling references in breezejs - json

Question

We are developing a single page app using ASP.NET MVC4 with Web Api + Ko + Breeze using EF Code First.
Our (simplified) data model looks like this
class Product {
public String Name { get; set; }
public ICollection<ImageCollection> ImageSets { get; set;}
public Image DefaultImage { get; set; }
}
class ImageCollection {
public ICollection<Image> Images { get; set; }
}
class Image {
public String ImageUrl { get; set; }
}
DefaultImage is a navigation property (with foreign key) and is one of the images in the ImageSets.
We are exposing a Web API method of Products() and with default Breeze configuration. JSON serialized output on the wire has references for objects (i.e., PreserveReferencesHandling.Object) so when I want to bind the ImageUrl ko is unable to resolve the value.
Html looks like this
<img data-bind="attr: { src: DefaultImage().ImageUrl, title: Name}" />
When I switch the serializer to do PreserveReferencesHandling.None, the binding works.
Question: how do I make the default config to work? or if I switch to PreserveReferencesHandling.None for Breeze what are the gotchas/downsides?
Thanks!

Answer 1

In general, you do NOT want to switch PreserveReferencesHandling to None because you will lose the ability to serialize circular references and your payloads will get much larger.
I don't actually understand why your binding would begin to work after setting this. The first step to understanding this is probably to check that the ko objects actually contain the correct data after your query.
Remember that breeze navigation properties are lazy-loaded, so you may not have loaded them with your initial query. Take a look at the "EntityAspect.loadNavigationProperty" method.