knockout.js - knockout foreach binding not working when viewmodel used as a sub-view-model wizard style dialog -
i creating wizard consists of multiple sub-view-models.
one view-model (step 3) copy of knockout form , consists of 2 radio button groups, first group controls options available in second group.
i having trouble binding radio buttons when used in sub-view, whilst works standalone view-model, seems when used sub-view self.availabledatabases
ko.computed function never called (or in other words, seems view not bound viewmodel).
the select db radio group bound child's view model availabledatabases below code:
<h1>select os:</h1> <div data-bind="foreach: os" > <div> <input type="radio" name="os" data-bind="attr: {value: name}, checked: $root.selectedos" /> <span data-bind="text: name"></span> </div> </div> <h1>select db:</h1> <div data-bind="foreach: availabledatabases" > <div> <input type="radio" name="db" data-bind="attr: {value: name}, checked: $root.selecteddb" /> <span data-bind="text: name"></span> </div> </div>
the fiddle entire wizard code here, ideas doing wrong integration sub-view-model?
you need use $parent
instead of $root
.
the $root
references main view model pass in applybindings call in case viewmodel
have selectedos
, selecteddb
properties on configuremodel
.
so need use $parent
"go 1 level up" in foreach access properties (or use $root.configuremodel().selectedos
go way top , go 1 level down configuremodel
)
<h1>select os:</h1> <div data-bind="foreach: os" > <div> <input type="radio" name="os" data-bind="attr: {value: name}, checked: $parent.selectedos" /> <span data-bind="text: name"></span> </div> </div> <h1>select db:</h1> <div data-bind="foreach: availabledatabases" > <div> <input type="radio" name="db" data-bind="attr: {value: name}, checked: $parent.selecteddb" /> <span data-bind="text: name"></span> </div> </div>
demo jsfiddle.
you can read these binding context properties in documentation.
Comments
Post a Comment