This concept is really challenging for me to grasp as I am not accustomed to this particular style of programming or data management.
Presently, my main objective is to pass a JSON object retrieved through Breeze into a Dynatree or Fancytree.
All the available examples online assume that the tree will make an AJAX call through "initajax" or require a complex custom binding handler where various objects are passed:
ko.bindingHandlers.dynatree = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
setTimeout(function () {
$(element).dynatree({
noLink: true,
minExpandLevel: 2
})
// The timeout ensures the correct Knockout bindings appear before the dynatree functions.
}, 1000);
}
}
To me, this all seems overly complicated. I already have the JSON object and I know it's functional. If I use Knockout to "foreach" bind it to plain HTML, all the data displays perfectly fine. In my understanding, I just need to initialize the tree div and pass the JSON object... I'm just unsure how to accomplish that!
I attempted to use this jsfiddle: http://jsfiddle.net/Ebram/UhA3m/5/ but Chrome developer tools raise an error about the element lacking a "dynatree" method when the custom binding handler activates. It passes in a "ul" element which may be causing issues - shouldn't it be passing in the tree div instead of the ul element?
If anyone could provide guidance on this matter, I would greatly appreciate it. Since I am following John Papa's SPA methodology, I am uncertain where to place any separate JS initialization code because the underlying viewmodel does not seem suitable for executing a $(#tree).dynatree initialization type command, right? Frankly, I haven't fully grasped this yet.
Essentially, I am seeking something like "once the viewmodel for this view has completed loading and the knockout binding process is occurring, initialize the dynatree div and provide this JSON object to the tree" if that makes sense in pseudocode?