nathanboktae/cherrytree-for-knockout

Use knockout components with CherryTree hiearchial routing

cherrytree-for-knockout's Issues

Support virtual elements on `routeView`

Reduce flicker

Currently all routeView binding handlers have a dependency on activeRoutes, so during a transition, that is bulk replaced, causing the entire tree to re-render. A transition at depth 3 to another sibling should not cause depth 1 and 2 to rerender. We need to do deep comparisons before attempting to call component.init.

Also in general there may be resolve promises that are resolved already, but will still be async and resolve on the next tick - flickering over to route-loading during that time is a bad experience. This might be solved with the solution to the above problem.

Update query params after any potential disposals?

Sometimes views that are about to be disposed anyways will have their bound querystring parameterss updated only to be thrown away immediately thereafter. This should be done after any route view model changes (additions/removals), unless there is a gotcha or adverse effect.

Cherrytree for KO and RequireJS example

Hello Nathan,

I was trying to use cherrytree using require but I am having some problems. I was wondering if you could help me out.

the versions I am running are:

• cherrytree 2.3.1
• cherrytree-for-ko 0.5.2

this is my main class

requirejs(['knockout', 'cherrytree', 'pages/home/home',
'components/greeting', 'cherrytree-for-knockout'], function (ko, cherrytree, homeComponent, greetingComponent, cherrytreefoko) {

    ko.components.register('home', homeComponent);
    ko.components.register('greeter', greetingComponent);

    router = cherrytree();

    router.map(function (route) {
        route('home', homeComponent);
    })

    router.use(ko.bindingHandlers.routeView.middleware);
    router.listen();

    ko.applyBindings({ router: router }, document.querySelector('main'));
});

<main data-bind="routeView: router"></main>

the problem that is on the console says:
Uncaught (in promise) TypeError: Cannot read property 'name' of undefined(…) in this line:
middlewareName = router.middleware[i].name || 'anonymous'; of cherrytree.js

It seems that I am not able to load the middleware.

Thanks a lot Nathan.

Add `$routeComponent` to the binding context

AKA the $root for the current route view.