Question

0

89

Views

Knockout.js Cannot read properties of undefined inside ViewModel

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>

3 months ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-26T20:30:36.852Z

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>