CODEWITHSUNDEEP
knockout.js
user1294594
user1294594

Reputation:

knockoutjs unable to parse bindings

I am getting the below error from knockoutjs. It clearly knows what AreaNames is most of the time because the UI shows that the AreaNames are displaying, but at some point the javascript freezes with the error.

Uncaught Error: Unable to parse bindings. 
Message: TypeError: Object #<Object> has no method 'AreaNames'; 
Bindings value: foreach: ActiveDay().AreaNames()

Relevant code:

<ul data-bind="foreach: ActiveDay().AreaNames()">
    <li data-bind="text: $data"></li>
</ul>

var scheduleModel = function (shiftCellToggle) {
    var vm = this;
    vm.ActiveDay = ko.observable({ AvailableShiftCategories: [] });
    vm.CustomMapping = {
        'Weeks': {
            create: function (options) {
                var week = new scheduleWeekModel(vm, shiftCellToggle);
                ko.mapping.fromJS(options.data, week.CustomMapping, week);
                return week;
            }
        }
    };
}

    var scheduleWeekModel = function (scheduleModel, shiftCellToggle) {
        var vm = this;
        vm.CustomMapping = {
            'Days': {
                create: function (options) {
                    var day = new scheduleDayModel(scheduleModel, shiftCellToggle);
                    ko.mapping.fromJS(options.data, day.CustomMapping, day);
                    return day;
                }
            }
        };
    var scheduleDayModel = function (scheduleModel, shiftCellToggle) {
        var vm = this;
        vm.CustomMapping = {
            'AvailableShiftCategories': {
                create: function (options) {
                    var availableShiftCategory = new availableShiftCategoryModel(scheduleModel, vm, shiftCellToggle);
                    ko.mapping.fromJS(options.data, availableShiftCategory.CustomMapping, availableShiftCategory);
                    return availableShiftCategory;
                }
            }
        };

        vm.AreaNames = ko.observableArray([]);

var viewModel = new scheduleModel(createShiftToggle());
ko.applyBindings(viewModel);

Upvotes: 1

Views: 3890

Answers (2)

truedat101
truedat101

Reputation: 76

Best solution I found to this general problem is on GC: https://groups.google.com/d/msg/knockoutjs/oTVkPnNxF84/mK1FIrAaOqoJ

Output the ko object as a JSON string in your HTML. It is crude yet an effective tool to learn what is going on. In my case, I found that late binding, after a particular dom element becomes enabled was the key to eliminating my particular problems with this same type of error. Please try out the solution described on GC group.

Upvotes: 1

madcapnmckay
madcapnmckay

Reputation: 15984

Your code shows AreaNames being on an object called vm. But your binding implies that AreaNames is part of an object ActiveDay. This doesn't make sense from the code you supplied. We need to see more code maybe.

What is vm and how is it bound? Is this the object passed to applyBindings?

My first thought is that assuming ActiveDay is a property on your root VM it is at some point being unassigned which would break the binding in the manner you describe.

Hope this helps.

Upvotes: 0

Related Questions