Loading parts of the knockout model dinamically from database on demand
I store my data in a relational database table. Each record contains the
fields of a form and the name of the template
(http://knockoutjs.com/documentation/template-binding.html) to use for
them. (There are different record structures for different templates, but
the details are not important here.) I can get one record by ID in a
$.getJSON call, make a ko.mapping.fromJS from it and ko.applyBindings the
result on my HTML page. This works well so far for any given ID.
Now there is an other table with master-detail connections, i.e. I can get
for a master ID the array of ID-s of the child records. I'd like to
display the child records below the master (each child with its own
template, of course, which might be different) like in a tree view, when
the user expands that branch of the tree. I can't load the whole database
into the client browser, only the parts asked by the user should be
loaded.
I was thinking about foreach-binding
(http://knockoutjs.com/documentation/foreach-binding.html) the array of
ID-s somehow (seems to be natural), but there are a number of issues with
it:
KO wants the whole data structure to be present when binded. Now I have
the ID-s only, which refer to the records indirectly. My data will arrive
later, via async AJAX call.
Appending a new child record needs to fetch a new ID from the server (a
database sequence's next value). We must know the template of the new
record too, but it will be given somehow (the master has a default for new
children.)
I have a js object which caches the records already loaded (the key is the
ID, the value is the record), but I can't phrase the connection with
foreach.
Do you know some tricks to bind non-existing data (I mean currently not in
the model), or any method to handle this indirect reference?
Perhaps I could manipulate the DOM manually for the array, but this is
exactly what the foreach-binding does (I think), so I'd prefer the builtin
way, if possible.
Or, could I use KO's foreach to build empty slots for the children, and
bind to the slots later, when the AJAX succeeds? But how can I reference
these parts of the DOM?
Thanks.
No comments:
Post a Comment