knockout.js - Knockout JS - display template based on clicked link -

i have single page application mocked data. displaying unordered list. list nested. when click on item in list depending on item clicked sets 2 properties in vm, either "selectedlayer" or "selectedprogramme". layer nested under programme.

when layer clicked call function sets "selectedprogramme" parent - fine point. want display different content based on type of layer. have 3 templates want show 1 one template based on value of "layertype" of "selectedlayer".

hopefully clear - have put code in following jsfiddle: http://jsfiddle.net/azvbr/9/

typically can't data display in fiddle, can see have following html determine layer type , somehow use correct template:

<div id="layerdetails" data-bind="template: { name: $root.displaylayertype }"> </div> 

i did try passing 2 parameters, programme object , $data wasn't sure doing.

any assistance appreciated.

edit: changed js fiddle link working code advised.

to choose template based on value: when bind template use name function return proper name:

this.displaylayertype = function() {             if ( self.selectedlayer() ) {                 return self.selectedlayer().layertype.tolowercase()+"-template";             } else {                 return "error-template";             }     }; 

but code has more mistakes. make work need fix templates, drop parenthesis () observables. shouldn't use them in html (there exception evaluating expression).

<script type="text/html" id="treaty-template">     <!-- ko with: $root.selectedlayer -->     <h5 data-bind="text: layertitle"></h5>      <p><!--ko text: layertype --><!--/ko--></p>     <p>treaty value: <span data-bind="text: treatyvaluething"></span></p>     <!-- /ko --> </script> 

here's working fiddle , other changes: http://jsfiddle.net/azvbr/11/ shouldn't remove jquery , it's dom ready event.

your implementation of passing more arguments done , documented in knockoutjs documentation.

and there problem setting selectedlayertype , selectedlayer. intend use first choosing template , second data. set 1 after knokoutjs have different data , different template name based on selectedlayertype not updated yet or vice versa. displaylayertype function based on selectedlayer , layertype property. it's cleaner , simpler (less places bugs) if need way, 2 observables can it. search silent update of observables. update 1 of them silently , let other bubble mutation.