Question

I’m currently developing an application based on no-sql (using raven db). The core aspect of this application is a tree-like data structure with many nodes, subnodes and so on.

Currently, each node or subnode is represented by a c# object. A parent-child relationship is made with a collection of subnodes on the parent node, a forward-only relationship.

The whole thing is handled by ad hoc forms, in an Mvc application, with proper GETs and POSTs for each data type. The whole graph is stored as JSON on Raven DB.

Now the goal is to modify the UI part using knockoutjs. Since KO works with json data structures as well, I was wondering if there is a way to make the ravendb json structure “knockout compatible”, meaning I can directly use it without having to make a KO specific structure (to implement observables, etc) and then create a mapping between the two.

A sample of the object graph:

public class NodeA
{
public string Name {get;set;}
public List<SubNode> Childs {get;set;}
}

public class SubNode
{
public string Name {get;set;}
public bool SomeBool {get;set;}
}

public class NodeB
{
public string Name {get;set;}
public int SomeInt {get;set;}
}

public class GraphToStore
{
public List<NodeA> NodeAList {get;set;}
public List<NodeB> NodeBList {get;set;}
}

The read/write part would still be handled server side, with ajax calls after stuff gets updated on the UI. Validation would be server-side and returned to the client via ajax calls too. My problem is as I said making the ravendb json work with knockoutjs, otherwise I have to reconstruct the whole thing and map it, and the graph is huge (50+ classes).

Answer 1

Take a look at Knockout-mapping-plugin. It will “automagically” generate the knockout compatible viewmodel with one call.

You would do something like

var viewModel.myRavenDbData = ko.mapping.fromJSON(json data variable);
var unwrappedData = viewModel.myRavenDbData(); // need only if viewModel.myRavenDbData is an observable

After you have this working, breakpoint after the call to mapping and explore the data structure. Generally, it will look like your data structure with ko.observables for the actual values. All the nodes needed for navigation will be normal javascript objects.