KO.js how to set the default view when using the view designer

Question

I (new to KO!), Playing with the view designer suggested by Ryan Niemeyer here: How to properly structure your KnockoutJS application , and I'm trying to set the default display to show at boot ...

For example, in # 3 you can use a constructor function, for example ...

and here my fork is trying to set the default value:

// (templates are defined in the fiddle) var View = function(title, templateName, data) { this.title = title; this.templateName = templateName; this.data = data; }; var definedViews = ko.observableArray([ new View("one", "oneTmpl", new SubModelA()), new View("two", "twoTmpl", new SubModelB()) ]); var viewModel = { views: definedViews, defaultView: 0, selectedView: ko.observable( definedViews[0] ) }; ko.applyBindings(viewModel); 

index.html

  <!-- ko with: selectedView --> <div data-bind="template: { name: templateName, data: data }"></div> <!-- /ko --> 

http://jsfiddle.net/memeLab/WVVyM/2/

when loading, selectedView is undefined, but when I clicked to select it contains the object as expected ...

I also tried reorganizing viewModel as a function, trying to pass parameters to an html declaration, and a bunch of random guesses not coherent enough to summarize here ...

any suggestions? TIA!

Answer 1

Actually you are missing ()

 var viewModel = { views: definedViews, defaultView: 0, selectedView: ko.observable( definedViews()[0] ) }; 

Here's a working fiddle: http://jsfiddle.net/ZAHC9/