0

I have a nested json i eventually broke down to use with ko.mapping:

{ users: [ { k: 'key', 
             name: 'Alice'
           }, 
         ],
  roles: [ { k: 'key', 
             name: 'Standard', 
             regex: [ ( 'root', 'me', 'myself'), 
                     ],
           },
         ]
}

...etc.

My situation is that:

  1. my UI needs a data-bind on vm.users.k, but json data (via $.getJSON or $.ajax) is not jet loaded from server;
  2. how can I define the UI, binding a dom element to e.g. vm.users.name, while waiting for ajax request to succeed?

I was looking at this question but maybe I miss the point.

My goal is to define the UI without modeling the initial viewModel, letting it be populated by an Ajax call to server. All nested items and array are needed to became observables.

My last code after some iterations:

function ViewModel( ) {
    var self = this;

    self.users = ko.observableArray();
    self.roles = ko.observableArray();
// etc. logic
};

var viewModel = new ViewModel();
ko.applyBindings( viewModel );
$.getJSON('/api/call/from/server', function( data ){
    ko.mapping.fromJS( data.users, {}, viewModel.clienti );
    ko.mapping.fromJS( data.roles, {}, viewModel.procedure );
});

And html:

<select name="users" data-bind="options: users,
                                optionsCaption: '',
                                optionsText: name,
                                optionsValue: k">

Server side google app engine with headers:

self.response.headers['Content-Type'] = 'application/json; charset=utf-8'
self.response.out.write( json.dumps( object ) )

Actually, I don't want to use async: false. I managed to broke ko.mapping invocation in three calls from js data.responseJSON, e.g. mapping users to vm.users, then roles to vm.roles, etc.

Community
  • 1
  • 1
user2154587
  • 61
  • 7
  • so the SO link you shared suggests to create a `custom binding` and see if `vm.users.k` exists or not _when_ your custom binding is intialized...If it exists, fine; if not then create it manually and bind with that... – gkb Dec 07 '16 at 04:35
  • no problem with ajax if you put your model into an observable – TSV Dec 07 '16 at 08:11
  • I think both answers assume I want/can structure my viewModel... My goal instead is to define a general way to get UI/data/representation from server without the needing to manually maintain the data structure both in JS than in HTML, beside that in server side modeling and Json. – user2154587 Dec 07 '16 at 08:47
  • Show how you are loading and binding the data. Doesn't have to be the full code, just an example of what's in `applyBindings` and how it gets populated with data. – user3297291 Dec 07 '16 at 10:50
  • I edited the question as per @user3297291 – user2154587 Dec 07 '16 at 21:55
  • Looking at the code you've added, I don't really see your problem... If you want to select an user and display its information, you'll have to add an observable to your ViewModel and bind it to the select. You can use the `with` binding on this observable to prevent crashing data-binds when it's initially `undefined` – user3297291 Dec 08 '16 at 21:35

0 Answers0