Passing a Knockout Observable as a parameter to a JavaScript Function?

Question

My Knockoutjs code goes as following:

function chainModel(){
        var self = this;
        this.total_count = ko.observable();

        function get_total_count(number){
            $.ajax({
                type : "get",
                url : "./XYZ/abc.php",
                cache : false,
                data : {number: number},
                success : function(result){
                    self.total_count($.parseJSON(result));
                },
                error : function(jqXHR, textStatus, errorThrown){
                    console.log("Error ! Unable to get step " + $number + " count." + "Error: " + errorThrown + ", Status: " + textStatus);
                }
            });
        }
    }

    ko.applyBindings(new chainModel());

Inside the get_total_count() function, I am assigning the ajax result to self.total_count observable. Instead, I would like to pass the observable too as an parameter to the get_total_count() function so that I can reuse the same function for more than one observable.

just out of curiosity: why are you using $ notation for the $number parameter? That is just a number? not a jQuery object — Daniel Conde Marin
– Daniel Conde Marin, Commented Nov 15, 2014 at 19:01
What prevents you from passing the observable as a parameter? — Daniel Conde Marin
– Daniel Conde Marin, Commented Nov 15, 2014 at 19:06

Tomalak · Accepted Answer · 2014-11-15 20:03:07Z

4

Here's a different approach which is using the the promise semantics of jQuery Ajax calls. Take a few minutes to familiarize yourself with jQuery Deferreds if the concept is new to you, it's worth it.

Quick note: By widely adopted convention, constructor names are PascalCase and all other names are camelCase in JavaScript. Don't use underscore_separated identifiers (nobody else does).

function ChainModel() {
    var self = this;

    self.totalCount = ko.observable();
    self.otherCount = ko.observable();

    function getCount(number) {
        return $.get("./XYZ/abc.php", {number: number})
        .fail(function (jqXHR, textStatus, errorThrown) {
            console.error(
                "Error ! Unable to get step " + number + " count." + 
                "Error: " + errorThrown + ", Status: " + textStatus
            );
        });
    }

    getCount(1).done(self.totalCount);
    getCount(2).done(self.otherCount);
}

ko.applyBindings(new ChainModel());

Since knockout observables are in fact functions and calling them sets their value, you can directly use them as success callbacks in Ajax calls.

By returning the jqXHR object from getCount(), you get access to the promise functions it exposes. So instead of passing in the target observable into getCount() you could pass it to the .done() callback, thus assigning the result of the Ajax call to it. Effectively this is separation of concerns and makes your code more flexible.

Other notes:

You should not have to force cache: false in an Ajax call. Set the appropriate Cache-Control header on the server side and the browser won't cache the call.
jQuery automatically parses the response for you, manually calling $.parseJSON() is not necessary.

edited Nov 15, 2014 at 20:03

answered Nov 15, 2014 at 19:57

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saurabh Over a year ago

Thanks. I still don't understand why '$.paseJSON()' is not necessary assuming that my PHP function returns an array indexed by column number. If I don't use '$.parseJSON()' then it displays data as [{"1234"}] .

Tomalak Over a year ago

When jQuery receives a JSON encoded response then it decodes it automatically. If your response data still is JSON after that, then it's very probably that it's double-encoded on the server - effectively a bug you need to fix on the server.

mhu · Accepted Answer · 2014-11-15 19:12:47Z

Isn't it as simple as passing the observable as an argument?

function chainModel(){
    var self = this;
    this.total_count = ko.observable();

    get_total_count(this.total_count, this.number);

    function get_total_count(observable, number){
        $.ajax({
            type : "get",
            url : "./XYZ/abc.php",
            cache : false,
            data : {number: number},
            success : function(result){
                observable($.parseJSON(result));
            },
            error : function(jqXHR, textStatus, errorThrown){
                console.log("Error ! Unable to get step " + number + " count." + "Error: " + errorThrown + ", Status: " + textStatus);
            }
        });
    }
}

ko.applyBindings(new chainModel());

Hari Darshan · Accepted Answer · 2014-11-17 13:09:08Z

0

Are you calling this method "get_total_count()" via any event binding. If so, then you can pass entire data view model to this method.

<input data-bind="event:{ click: function(data,event){ get_total_count(data,event,total_count()); } }" />

answered Nov 17, 2014 at 13:09

Hari Darshan

1,9181 gold badge25 silver badges42 bronze badges

Collectives™ on Stack Overflow

Passing a Knockout Observable as a parameter to a JavaScript Function?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related