View Model with Multiple JSON requests

[jacka...@gmail.com]

Hey all,

I've got a problem that I can't seem to find the answer to, bare with me as I'm new to this and some apparent things may not be apparent to me yet ;)

I've got two grids(koGrid) on the same page and I'm trying to bind them with data from two separate json calls.

My problem is that upon first load I get inconsistent debugger errors and only one table ends up loading data, once I refresh the page, the second table loads up.

I think I've got some weird race conditions or something happening, can anyone point me in the right direction to get this working or at least so that I understand it and can fix it.

Here is my JS, individually the tables load just fine, do I need to queue or thread the refresh function calls or something so they don't happen at the same time?

 
var SLCViewModel = function () {
    var self = this;
    var holdingsurl = "/SLC/GetAllHoldings";
    var ordersurl = "/SLC/GetAllOrders";
 
    var refreshholdings = function () {
        $.getJSON(holdingsurl, {}, function (data) { self.Holdings(data); });
    };
 
    var refreshorders = function () {
        $.getJSON(ordersurl, {}, function (data) { self.Orders(data); });
    };
 
    self.Holdings = ko.observableArray([]);
    self.Orders = ko.observableArray([]);
 
    refreshholdings();
 
    refreshorders();
 
    this.gridOrders = {
        data: self.Orders,
        columnDefs: [{ field: 'OrderId', displayName: 'Order Id' },
                    {field: 'Status', displayName: 'Status'}]
    };
 
    this.gridHoldings = {
        data: self.Holdings,
        columnDefs: [{ field: 'SecLender', displayName: 'Sec Lender' },
                     { field: 'UnderlyingSecurity', displayName: 'Underlying Security' },
                     { field: 'UnderlyingPrice', displayName: 'Underlying Price' },
                     { field: 'BPS', displayName: 'BPS' },
                     { field: 'Nominal', displayName: 'Nominal' }],
        showGroupPanel: true,
        jqueryUIDraggable: true
    };
 
}
$(document).ready(function () {
    ko.applyBindings(new SLCViewModel());
})

[Ryan Rahlf]

Hi Jack,

I'm guessing this has something to do with your bindings and the timing of the returns from your ajax calls, but without seeing your bindings I can't say for sure.  Take a look at my blog post which talks a bit about dealing with binding, ajax, and timing issues: http://ryanrahlf.com/showing-an-empty-ui-with-knockout-js-dealing-with-default-data/

My thought is that initially your binding occurs before your ajax returns and your data isn't ready (and your bindings don't handle nulls and undefineds).  On the second call the browser has the data cached, so things load correctly.

I hope this helps!

-Ryan Rahlf

_________________

http://RyanRahlf.com

@Ryanthem

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Robin Cote]

Here are my bindings.

<div class="gridOrdersStyle" data-bind="koGrid: gridOrders"></div>
 
<div class="gridHoldingsStyle" data-bind="koGrid: gridHoldings"></div>
 
<script src="~/Scripts/SLC.js"></script>

[Ryan Rahlf]

Ok, so nothing besides the grid bindings.  Can you post which console errors you're seeing?

[Robin Cote]

In my MVC4 App I get a "The context cannot be used while the model is being created." in my controller.

[Ryan Rahlf]

This happens to be an Entity Framework error, not expressly a Knockout issue.  You'll want to track that one down in the Entity Framework forums or on StackOverflow.  

If you're still having issues with Knockout once that one is resolved, please come back to the group and let us know what's going on!

-Ryan

[Robin Cote]

Thanks for the push in the right direction, I've solved the issue.

If anyone cares it was related to dbcontext being Transient lifestyle and I needed to have it per webrequest.

 Component.For<IQueryableUnitOfWork, UnitOfWork>().ImplementedBy<UnitOfWork>().LifestylePerWebRequest(),