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 -->

it's better to just paster your code and format it rather than upload images of the code. it's easier for people to edit and post answers that way. Better still create a JSFiddle demonstrating the issue. — Tanner, Jan 30 '14 at 09:56
possible duplicate of [Access $parent's $parent in knockout view](http://stackoverflow.com/questions/17069381/access-parents-parent-in-knockout-view) — PW Kad, Jan 30 '14 at 13:03

leszek.hanusz · Answer 1 · 2014-01-30T12:01:57.263

1

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

See the docs.

edited Jan 30 '14 at 12:01

answered Jan 30 '14 at 10:49

leszek.hanusz

5,152
2
38
56

2

actually, it's $parents[1]. But that is stated in the docs you linked anyway :) – Hans Roerdinkholder Jan 30 '14 at 12:01
1

$parents[1] looks fine, but it gives the same error. Anyway, I'm able to do it with `data-bind="checked: $root.store_data.timings_calendar.mon.holiday() == false"` – Shaheed ulHaq Jan 30 '14 at 12:36
Just a side note, to have this level of coupling to the structure of the viewmodels are bad. Its better if you have some kind of event bus that can publish when holiday changes – Anders Jan 30 '14 at 15:16
1

Also using $root is even more fragile than $parent(s) since its absolute it will break if you choose to insert a new viewmodel at the top – Anders Jan 30 '14 at 15:17

knockoutjs binding to $parent issue

1 Answers1