Question

I am trying to add a new view to John Papa’s Code Camper project. I am stuck on the simple hash nav binding. My question is how do I find the code that populates {href: favorites} ? It gets populated with the hash tag #/favorites but I cannot find where that happens. There are over 30 JS files and searching for “favorites” yields too many results. I have tried adding my newview code everywhere I find “favorites” but with no luck. I get the error:

Message: ReferenceError: newview is not defined; Bindings value: attr: {href: newview}

So, how can I determine what populates {href: favorites} in the code below? I do know how knockout bindings work, I just can’t locate the code in the project. John Papa’s Code Camper project and this specific code aside, in general is there any tool that can tell where a binding is located in knockout js?

<li class="route-top"><a data-bind="attr: {href: favorites}">Favorites</a></li>

EDIT: for this case, I found the binding. I thought it did not work because a web page was stuck in cache. Still, if there is a tool or method to identify what code is bound to a property I would like to know about it.

Answer 1

The section you are referring to are the navigation links for the views. Those are always visible in the shell, so I bound them to the vm.shell.js. The shell viewmodel has a property for the menuHashes, and those are actually defined in the config files (they could be database driven).

On a broader scope, uou can tell which views are bound to which viewmodels in CodeCamper by looking at the binder.js module. This is where the knockout bindings are linked to the html/views.

            ko.applyBindings(vm.shell, getView(ids.shellTop));
            ko.applyBindings(vm.favorites, getView(ids.favorites));
            ko.applyBindings(vm.session, getView(ids.session));
            ko.applyBindings(vm.sessions, getView(ids.sessions));
            ko.applyBindings(vm.speaker, getView(ids.speaker));
            ko.applyBindings(vm.speakers, getView(ids.speakers));