javascript - How do I access my viewmodel variables in my knockout component template? -

i trying create list of instruction steps using knockout components/templates.

the ul going contain list of steps (using knockout-registered custom element sidebar-step) template of <li></li>. have value this.testvar part of model contain attribute of <li> such class, or maybe "data-customattribute".

my question is, how include testvar value template? want might output line like:

<sidebar-step class=*testvar* params="vm: sidebarstepmodel">message 1</sidebar-step>

fiddle: https://jsfiddle.net/uu4hzc41/1/

html:

<ul>     <sidebar-step params="vm: sidebarstepmodel"></sidebar-step> </ul> 

javascript:

ko.components.register("sidebar-step", {     viewmodel: function (params) {         this.vm = params.vm;     },      template: "<li data-bind=\'text: vm.message\'></li>" });  var sidebarstepmodel = function () {     this.message = ko.observable("step description");     this.testvar = ko.observable("some value"); };  var viewmodel = function () {     this.sidebarstepmodel = new sidebarstepmodel();     this.sidebarstepmodel.message("message 1");     this.sidebarstepmodel.testvar("69");   };  ko.applybindings(new viewmodel()); 

you can use data-bind on custom tag. set class,

<sidebar-step data-bind="css:sidebarstepmodel.testvar" params="vm: sidebarstepmodel"></sidebar-step> 

https://jsfiddle.net/uu4hzc41/3/