knockout subscribe doesn't work when using knockout.validation and knockout.mapping with require.js

Question

So I test this out and found out that the subscribe function never gets called when I set up my code this way:

app.index.js

requirejs.config({
    "baseUrl": "/Scripts/app/item/",
    "paths": {
        "jquery": "//code.jquery.com/jquery-2.0.3.min",
        "toastr": "/Scripts/lib/toastr",
        "moment": "/Scripts/lib/moment",
        "fu": "/Scripts/lib/jquery.fineuploader-3.8.0",
        "ko": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min",
        "knockout.validation": "/Scripts/lib/knockout.validation",
        "mapping": "/Scripts/lib/knockout.mapping-latest.debug",
        "timeentry": "/Scripts/lib/jquery.timeentry.min",
        "model.obj": "../models/model.obj",
        "timecollection.kobindings":"/Scripts/lib/koBindings/timecollection.kobindings"
    },
    shim: {
        "knockout.validation": ["ko"],
        "mapping": ["ko"]
    }
});


require(["ko"], function (ko) {
    //manually set the global ko property
    window.ko = ko;

    //then bring in knockout validation
    require(["knockout.validation"], function () {
        ko.validation.configure({
            insertMessages: false,
            decorateElement: true,
            errorElementClass: 'error'
        });
        require(["main.index"], function (bs) {
            bs.run();
        });
    });
});

main.index.js

define(['jquery',
        'ko',
        'mapping',
        'indexViewModel',
        'model.obj'],
   function ($, ko, mapping, indexViewModel, obj) {
       var
           run = function () {
               var vm = new indexViewModel();
               var array = [];
               $.getJSON("/api/GetData/", function (data) {
                        mapping.fromJS(val.ObjCollection, {
                               create: function (options) {
                                   return new Obj(options.data);
                               }
                           }, vm.ObjCollection);

               }).done(function(){
                   ko.applyBindings(vm, document.getElementById('#view'));
               });
           };
       return {
           run: run
       };
   });

Model.js

define('model.obj', ['ko', 'moment'], function (ko, moment) {
    var Obj= function (data) {
        var self = this;
        self.Id = data.Id;
        self.Property = ko.observable(data.Property);

        self.Property .subscribe(function () {
            console.log('in here');
        }, self);    
};
    return Obj;
});

if i remove this code:

require(["ko"], function (ko) {
        //manually set the global ko property
        window.ko = ko;

        //then bring in knockout validation
        require(["knockout.validation"], function () {
            ko.validation.configure({
                insertMessages: false,
                decorateElement: true,
                errorElementClass: 'error'
            });
            require(["main.index"], function (bs) {
                bs.run();
            });
        });
    });

and just leave it like this:

require(["main.index"], function (bs) {
                    bs.run();
                });

The subscription function does display console.log, but with the code, the subscription never gets called.

score 1 · Answer 1 · answered Jan 08 '14 at 08:03

1

There's a syntax error in your code:

function ($, ko, mapping, indexViewModel, obj) {
   var
       run = function () {
           var vm = new indexViewModel();
           var array = [];
           $.getJSON("/api/GetData/", function (data) {
                    mapping.fromJS(val.ObjCollection, {
                           create: function (options) {
                               return new Obj(options.data);
                           }
                       }, vm.ObjCollection);

Noticed that you do 'return new Obj' (with capital), but the module is injected into the function as 'obj' (no capital). That would explain why you never get there (though it doesn't explain why knockout validation has anything to do with it).

If that doesn't help you, put some breakpoints in various pieces of your code, and just step through it. See where the problem appears. Do whole sections never get triggered, or is it just the subscription that isn't triggered? And WHY do you expect the subscribe callback to trigger in the first place? You set the value first, then subscribe, but if you never update the value anymore, it makes sense that the callback never triggers.

answered Jan 08 '14 at 08:03

Hans Roerdinkholder

3,000
1
20
30

sorry i replaced some of the object names with dummy ones to show an example. But you are right the knockout validation would not have anything to do with this particular error you see. The reason for subscription is i want to compute another value when this "Property" gets updated. – jmogera Jan 08 '14 at 14:50
Allright, but nothing in your posted code triggers the subscribe callback, so I'm wonder what DOES trigger it. And you should really step through the code and see where it stops working. The two pieces of code seem totally unrelated so there is a huge gap now that's impossible to fill in for the reader. – Hans Roerdinkholder Jan 08 '14 at 17:29
The trigger should occur when property is updated from the client side. i.e. – jmogera Jan 08 '14 at 20:38
So I'm guessing the page is still loading properly? Just the subscribe not working? In that case, put a breakpoint inside your Obj constructor and see if it is hit. If not, put a breakpoint in the getJSON callback and see if it gets hit. If not, put a breakpoint before the call to getJSON and see if it hits. Etc. The last point that is hit succesfully will be just before the code that is problematic. – Hans Roerdinkholder Jan 09 '14 at 07:16

knockout subscribe doesn't work when using knockout.validation and knockout.mapping with require.js

app.index.js

main.index.js

Model.js

1 Answers1