I have an object inside the viewModel where the "visible" property will have the value of the loadingVisible variable declared inside the viewModel as an observable.
My problem is that I always get the following error: Cannot read properties of undefined (reading 'loadingVisible');
I've tried in several ways but I still have the same error, is there any solution?
var viewModel = {
loadingVisible: ko.observable(false),
loadOptions: {
visible: viewModel.loadingVisible(),
showIndicator: true,
showPane: true,
shading: true,
hideOnOutsideClick: false,
shadingColor: 'rgba(0,0,0,0.4)',
},
};
return viewModel;
HTML
<div class="loadpanel" data-bind="dxLoadPanel: loadOptions"></div>
Easiest way I know is to have a property that both things can reference.
var loadingVisible = ko.observable(false);
var viewModel = {
loadingVisible: loadingVisible,
loadOptions: {
visible: loadingVisible,
showIndicator: true,
showPane: true,
shading: true,
hideOnOutsideClick: false,
shadingColor: 'rgba(0,0,0,0.4)',
},
toggleVisible: function(){
loadingVisible(!loadingVisible());
}
};
ko.applyBindings(viewModel);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="loadpanel" data-bind="visible: loadOptions.visible">
<ul><li>Test</li></ul>
</div>
<button data-bind="click: toggleVisible">Press Me</button>