Question

I’m new to knockout and don’t know if I’m doing this right at all or not

I have a shopping cart editor, just like knockout live examples, except the fact that I want to have a more advanced product selector. my products have actually two kind of code which user must be able to enter one of those and get product’s complete details on his cart. so I would have two inputs for each kind of code and when the user enter a code in any of those, I should make an ajax call and load product info (including productId, productName, the_other_code, etc.).

I’v tried to this by subscribing to both code1 & code2 – make ajax call and set model’s data after getting data from the server, but it makes a kind of recursive event(subscribe) firing and thus calling ajax methods repeatedly.thus I believe if can set knockout subscription OFF during the SetData method, then the recursive act would not happens.

function Product(data) 
{
    var self = this;

    self.ProductId = ko.observable();
    self.Code1 = ko.observable();
    self.Code2 = ko.observable();
    self.Title = ko.observable();

    self.SetData = function (itemdata) {
        self.ProductId (itemdata ? itemdata.ProductId : null);
        self.Code1(itemdata ? itemdata.Code1 : null);
        self.Code2(itemdata ? itemdata.Code2 : null);
        self.Title(itemdata ? itemdata.Title : null);
    };

    self.SetData(data);

    self.Code1.subscribe(function (value) 
    {
        var productInfo = Ajax_GetPartDataWithCode1(value);
        self.SetData(productInfo );
    });

    self.Code2.subscribe(function (value) {
        var productInfo = Ajax_GetPartDataWithCode2(value);
        self.SetData(productInfo );
    });
}

any help would be greatly appricated!

Answer 1

A simple boolean flag should be enough. Set it to true upon entering SetData and to false when exiting, then in the subscribe callbacks return right away if the flag is set:

    var updatingData = false;

    self.SetData = function (itemdata) {
        updatingData = true;
        self.ProductId (itemdata ? itemdata.ProductId : null);
        self.Code1(itemdata ? itemdata.Code1 : null);
        self.Code2(itemdata ? itemdata.Code2 : null);
        self.Title(itemdata ? itemdata.Title : null);
        updatingData = false;
    };

    self.SetData(data);

    self.Code1.subscribe(function (value) 
    {
        if (updatingData) return;
        var productInfo = Ajax_GetPartDataWithCode1(value);
        self.SetData(productInfo);
    });

    self.Code2.subscribe(function (value) {
        if (updatingData) return;
        var productInfo = Ajax_GetPartDataWithCode2(value);
        self.SetData(productInfo);
    });