CODEWITHSUNDEEP
javascriptknockout.jsviewmodel
user3157885
user3157885

Reputation: 39

Why is my viewModel updated in HTML but not in my javascript?

I have a function that moves a line item up one line at a time. For simplicity, I'm showing a small part of the code. My observable's display as expected in HTML using $root.cRecordID, but in my code, they are undefined. It's confusing and frustrating. Can anyone shed some light?

listOrderUp: function (lid) {
    // get RecordID of selected item
    //viewModel.loadItemByID(lid);
    console.log(lid);

    OData.read(_serviceURL + "/nsLineItems(" + lid + ")?", function (response) {
        viewModel.cRecordID(response.RecordID);
        viewModel.cMenuID(response.MenuID);
        viewModel.cEntreeID(response.EntreeID);
        viewModel.cCategoryID(response.CategoryID);
        viewModel.cListOrder(response.ListOrder);
    });

    console.log(viewModel.cRecordID());

    // selected item - decrease ListOrder by 1
    var putdataCurrent = {
        RecordID: viewModel.cRecordID(),
        MenuID: viewModel.cMenuID(),
        CategoryID: viewModel.cCategoryID(),
        EntreeID: viewModel.cEntreeID(),
        ListOrder: viewModel.cListOrder() - 1
    };

    console.log(putdataCurrent);

    var _requestCurrent = {
        requestUri: _serviceURL + "/nsLineItems(" + viewModel.cListOrder() + ")",
        method: "MERGE",
        data: putdataCurrent
    };

    OData.request(_requestCurrent, function (data) {
    });
}

Here's console results: enter image description here

Here's my html test code:

This displays the expected result, but I need the results in my code so I can save the data to the server. How can it be undefined in the code(javascript file) but it displays correctly in html? Thanks, Jeff

Upvotes: 0

Views: 56

Answers (2)

user3157885
user3157885

Reputation: 39

I got the results I wanted by embedding the REST code inside the OData request:

listOrderUp: function (lid) {
    OData.read(_serviceURL + "/nsLineItems(" + lid + ")?", function (response) {
        viewModel.cRecordID(response.RecordID);
        viewModel.cMenuID(response.MenuID);
        viewModel.cEntreeID(response.EntreeID);
        viewModel.cCategoryID(response.CategoryID);
        viewModel.cListOrder(response.ListOrder);

        // selected item - decrease ListOrder by 1
        var putdataCurrent = {
            RecordID: viewModel.cRecordID(),
            MenuID: viewModel.cMenuID(),
            CategoryID: viewModel.cCategoryID(),
            EntreeID: viewModel.cEntreeID(),
            ListOrder: viewModel.cListOrder() - 1
        };

        console.log(putdataCurrent);

        var _requestCurrent = {
            requestUri: _serviceURL + "/nsLineItems(" + lid + ")",
            method: "MERGE",
            data: putdataCurrent
        };

        OData.request(_requestCurrent, function (data) {
        });
    });
    console.log(viewModel.cRecordID());
}

Upvotes: 0

msokrates
msokrates

Reputation: 188

I guess OData.read(.....) is an asynchronous call to a server? If so, I believe that your code which sets the value in var putDataCurrent is being executed before the call to the server has returned. If you put a couple of breakpoints where you set the results of the call to the observables and where you set the putDataCurrent and check which one gets hit first. If that's the problem you could move your code that within the 'success' callback of OData.read or potentially you could use promises

Upvotes: 1

Related Questions