Binding Observable array of nested dependent observables in knockout

1
votes

I am using Breeze which automatically creates a nested Observablearray structure consisting of dependent observables at different levels.

I have tried to emulate the structure in this fiddle. Simply put I have a client entity being returned from the server with a related user entity which Breeze is automatically mapping to an observable array. I just need to display some client properties and some user properties on my form from this array.

HTML

<div>

    <select  data-bind="options: clientAndStaff, optionsText: 'clientId', value: 'clientId', optionsCaption: 'Select a client'"></select>    

</div>

VM

var esp= esp||{};

esp.ClientDetails  = function(x){

    this.clientId =  new ko.dependentObservable(function(){return x.clientId;});

   this.User =  new ko.dependentObservable(function(){return x.ClientStaffDetails;});


};


esp.ClientStaffDetails = function(x){

    var FirstName = new ko.dependentObservable(function(){return x.firstName;});
    var LastName =  new ko.dependentObservable(function(){return x.lastName;});


};

esp.vm = new (function()
              {
                  this.clientAndStaff= ko.observableArray(
                  [
                      new esp.ClientDetails({clientId:1                                        
                                             ,clientStaff:new esp.ClientStaffDetails({firstName:'first',lastName:'example'})

                                            }),
                      new esp.ClientDetails({clientId:2
                                             ,clientStaff:new esp.ClientStaffDetails({firstName:'second',lastName:'example'})
                                            })   

                  ]
                  );
              });

ko.applyBindings(esp.vm);

Fiddle

http://jsfiddle.net/T6Fk5/7/

Can anyone tell me how to bind the optionsText to the firstName or better still firstName + LastName given the observableArray structure. Thanks in advance

2
knockout.jsbreeze

2 Answers

0
votes

The simpliest way to do that is by overriding the toString method of the clientStaffDetails class.

esp.ClientStaffDetails = function (x) {
    var self = this;

    self.FirstName = new ko.observable(x.firstName);
    self.LastName = new ko.observable(x.lastName);
    self.toString = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    });

};

I also changed optionsText parameter to User

<div>
    <select data-bind="options: clientAndStaff, optionsText: 'User', value: 'clientId', optionsCaption: 'Select a client'"></select>
</div>

See Fiddle

I hope it helps.

0
votes

Well the only way I could do it is to remodel the data returned by breeze and then add it to my observable array. Not very happy with this but since read only data this works for now.

function querySucceeded(data) {
            if (observableArray!= null) {
                var temp = [];
                data.results.forEach(function (val) {
                    temp.push({'id':val.ClientStaffID(),'name':val.User().FirstName() +' '+val.User().LastName() });

                });
                observableArray(temp);
                firstLoad = false;
                return;
            }

        }