函数无法在剔除中访问observableArray

Question

I keep getting this error when I try to update an observableArray: 'Unable to get property 'removeAll' of undefined or null reference'

Here is my code:

var agilityFirmViewModel = {
    test: ko.computed(function () {
        return Pairs[0].Pairs;
    }),

    currentLocation: ko.observableArray(Pairs[0].Pairs[0].Location);

//function to update values in currentLocation
 ChangeLocation: function (practiceGroup) {
        if (practiceGroup === undefined) {
            practiceGroup = '(All Practice Groups)';
        }
        for (var i = 0; i <= Pairs[0].Pairs.length; i++) {
            if (practiceGroup.Department === Pairs[0].Pairs[i].Department) {
                this.currentLocation.removeAll();
                this.currentLocation.push(practiceGroup.Location[i]);
                return root.currentLocation;
            }
        }
    },
}

$(document).ready(function () {
    ko.applyBindings(agilityFirmViewModel);
});

Assuming that it goes through the if statement inside the for loop everytime, whenever it gets to

this.currentLocation.removeAll();

I get the error above saying that currentLocation is undefined. I know that currentLocation has data in it, so would could be causing this issue. It's probably something simple, but I can't seem to figure it out. Thank you.

Where i call ChangeLocation():

       <li class="nav-sidebar-GreenMenu">
                    <a href="javascript:;" class="draggable-panel" draggable="true">
                        <i id="CategoryIcon" class="glyphicon glyphicon-user"></i>
                        <span class="sidebarTabName"><b>Practice Group</b></span><br />
                        <!--For some reason, changing the margin-left below will change the width of the entire sidebar-->
                        <span id="CurrentItem_TPG" class="currentItem" @*style="margin-left:64px;"*@>(All Practice Groups)</span>
                        <span id="DefaultItem_TPG" style="display:none;">(All Practice Groups)</span>
                        <i class="fa fa-chevron-left pull-right hidden-xs" data-bind=""></i>
                        <span class="arrow open" style="margin-top:-30px;"></span>
                    </a>
                    <ul class="sub-menu">            
                        <!--ko foreach: test()-->
                            <li>  
                                <a href="#" data-bind="text: $data.Department, value: $data.Department, click: $root.ChangeLocation.bind($data.Department)" class="active"></a>
                            </li>
                        <!-- /ko -->
                    </ul>
                </li>

Answer 1

The problem is the way you're using bind . The actual signature for bind is:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

Meaning, the first argument determines what this means in the function and the rest sets the arguments to use when it's called. Instead, try changing your click handler to this:

$parent.ChangeLocation.bind($parent, $data);

This ensures that ChangeLocation is called with $parent === this and $data === practiceGroup