knockout.js - Unable to bind to a view with compose containerless code -
this kind of related recent question multiple views within 1 page. started durandal sample knockout shell , attempted extract navigation menu on left own "navlist.html/navlist.js" view/viewmodel.
i created navlist.html , navlist.js:
<ul class="nav nav-list"> <li class="nav-header">basic examples</li> <!--ko foreach: introsamples--> <li data-bind="css: { active: isactive }"> <a data-bind="attr: { href: hash }, text: title"></a> </li> <!--/ko--> <li class="nav-header">detailed examples</li> <!--ko foreach: detailedsamples--> <li data-bind="css: { active: isactive }"> <a data-bind="attr: { href: hash }, text: title"></a> </li> <!--/ko--> </ul> define(['plugins/router', 'knockout'], function (router, ko) { var childrouter = router.createchildrouter() .makerelative({ moduleid: 'ko', fromparent: true }).map([ { route: '', moduleid: 'helloworld/index', title: 'hello world', type: 'intro' }, { route: 'helloworld', moduleid: 'helloworld/index', title: 'hello world', type: 'intro', nav: true }, { route: 'clickcounter', moduleid: 'clickcounter/index', title: 'click counter', type: 'intro', nav: true }, { route: 'simplelist', moduleid: 'simplelist/index', title: 'simple list', type: 'intro', nav: true }, { route: 'betterlist', moduleid: 'betterlist/index', title: 'better list', type: 'intro', nav: true }, { route: 'controltypes', moduleid: 'controltypes/index', title: 'control types', type: 'intro', nav: true }, { route: 'collections', moduleid: 'collections/index', title: 'collection', type: 'intro', nav: true }, { route: 'pagedgrid', moduleid: 'pagedgrid/index', title: 'paged grid', type: 'intro', nav: true }, { route: 'animatedtrans', moduleid: 'animatedtrans/index', title: 'animated transition', type: 'intro', nav: true }, { route: 'contactseditor', moduleid: 'contactseditor/index', title: 'contacts editor', type: 'detailed', nav: true }, { route: 'grideditor', moduleid: 'grideditor/index', title: 'grid editor', type: 'detailed', nav: true }, { route: 'shoppingcart', moduleid: 'shoppingcart/index', title: 'shopping cart', type: 'detailed', nav: true }, { route: 'twitterclient', moduleid: 'twitterclient/index', title: 'twitter client', type: 'detailed', nav: true } ]).buildnavigationmodel(); return { router: childrouter, introsamples: ko.computed(function () { return ko.utils.arrayfilter(childrouter.navigationmodel(), function (route) { return route.type == 'intro'; }); }), detailedsamples: ko.computed(function () { return ko.utils.arrayfilter(childrouter.navigationmodel(), function (route) { return route.type == 'detailed'; }); }) }; });
...which pretty identical copies of original index.html , index.js files.
i turned index.js this:
define(['ko/navlist'], function(nav) { return { router: nav.router }; });
and index.html this:
<div class="container-fluid knockout-samples"> <div class="row-fluid"> <div class="span2 well"> <!--ko compose: {view: navlist, transition: 'entrance'} --> <!--/ko--> </div> <div class="span10"> <!--ko router: { transition:'entrance', cacheviews:true }--><!--/ko--> </div> </div> </div>
...which not major change. i'm trying achieve @ point education via tinkering. figured if deconstruct/reconstruct working example i'd step further along line of understanding of how structure app.
of course, goes wrong on binding navlist. appears despite being told go , navlist view, it's treating part of index.js model far can tell in console window:
binding ko/index object {router: object, __moduleid__: "ko/index"} system.js:75 unable parse bindings. bindings value: compose: {view: navlist, transition: 'entrance'} message: navlist not defined; view: ko/index; moduleid: ko/index
could kind soul please explain fundamental understanding issue have here please?
solution: pw kad suggested, using container "data-bind" syntax in index.html instead of containerless trying has fixed problem. code now:
<div class="container-fluid knockout-samples"> <div class="row-fluid"> <div class="span2 well" data-bind="compose: 'ko/navlist'"></div> <div class="span10"> <!--ko router: { transition:'entrance', cacheviews:true }--><!--/ko--> </div> </div> </div>
use ko compose: 'viewmodels/navlist' instantiate view model , view parent view. allows durandal map using default viewlocator in app/viewmodels/ folder.
check docs more info
Comments
Post a Comment