knockoutjs binding to $parent issue

Question

I am binding my view to the following viewmodel. I am sharing only relevant parts of it though.

self.store_data = {
        id: ko.observable(-1),
        business_name: ko.observable(''),
        company_number: ko.observable(''),
        trading_number: ko.observable(''),
        address: ko.observable(''),
        postcode: ko.observable(''),
        phone_number: ko.observable(''),
        opening_hours: ko.observable(''),
        closing_hours: ko.observable(''),
        is_bank_holiday: ko.observable(false),
        business_photo: ko.observable(null),
        business_photo_type: ko.observable('jpeg'),
        lat: ko.observable(''),
        lng: ko.observable(''),
        is_premium: ko.observable(false),
        is_closed: ko.observable(0),
        catalog : ko.observable(), //selected catalog
        timings_calendar : {
                'mon': {
                    holiday: ko.observable(false),
                    timings: ko.observableArray([
                        new self.Timings('9:00:00', '01:00:00'),
                        new self.Timings('02:00:00', '06:00:00')
                    ])
                },
                    'tue': {
                    holiday: ko.observable(false),
                    timings: ko.observableArray([
                        new self.Timings('9:00:00', '01:00:00'),
                        new self.Timings('02:00:00', '06:00:00')
                    ])
                },...

and here is the view where data-bind="checked: $parent.$parent.holiday() == false" is not getting binded with this error "TypeError: Cannot call method 'holiday' of undefined". What is the issue? please help.

<!-- ko foreach: store_data.timings_calendar.mon.timings -->
                            <div class="ui-block-a" style="width: 30%;">
                                <!-- ko if: $index() === 0 -->
                                <input type="checkbox" data-bind="checked: $parent.$parent.holiday() == false" id="monday-timings-checkbox" data-mini="true" /> <label for="monday-timings-checkbox">Mon</label>
                                <!-- /ko -->
                            </div>
                            <div class="ui-block-b" style="width: 30%;">
                                <select  data-mini="true" data-bind="options: $root.timeModel.timings, optionsText: 'text', optionsValue: 'value', value: $data.opening_hours "></select>
                            </div>
                            <div class="ui-block-c" style="width: 30%;">
                                <select  data-mini="true" data-bind="options: $root.timeModel.timings, optionsText: 'text', optionsValue: 'value', value: $data.closing_hours "></select>
                            </div>
                            <div class="ui-block-c" style="width: 10%;">
                                <!-- ko if: $data.opening_hours() != '' && $data.closing_hours() != '' && $index() != $parent.length -1 -->
                                    <button data-mini="true" data-icon="delete" data-iconpos="notext" data-theme="a"></button>
                                <!-- /ko -->

                                <!-- ko ifnot: $data.opening_hours() != '' && $data.closing_hours() != '' && $index() != $parent.length -1 -->
                                    <button data-mini="true" data-icon="plus" data-iconpos="notext" data-theme="b"></button>
                                <!-- /ko -->


                            </div>

                            <!-- /ko -->

Answer 1

You cannot use $parent.$parent you should use $parents[1] instead.

See the docs .