0

I have a drop down list that is bound to a SelectedFormat value. The lists options are populated from external source on load and matches the view models data.Format object base on id.

Take a look at the js fiddle

Can anyone tell me why the model updates but the UI is not updating with the correct Format.Name

Thanks.

HTML:

<div data-bind="text:data.Format.Name"></div>
<select data-bind="
    options:Controls,
    optionsText: 'Name',
    value: data.SelectedFormat"></select>

Model:

var jsonData = {
    Id: "abc-123",
    Name: "Chicken Cheese",
    Format: {
        Id: 2,
        Name: 'Medium',
        Other: 'Bar'
    }
};

var self = this;
self = ko.mapping.fromJS(data);
self.SelectedFormat = ko.observable(
    //return the first match based on id
    $.grep(vm.Controls,function(item){            
        return item.Id === self.Format.Id();
    })[0]
);

//when changed update the actual object that will be sent back to server 
self.SelectedFormat.subscribe(function (d) {
    this.Format = d;        
},self);
4

1 回答 1

1

In your code, you have Format and SelectedFormat. The former isn't an observable and so can't trigger updates. You have to use SelectedFormat instead.

<div data-bind="text:data.SelectedFormat().Name"></div>

Example: http://jsfiddle.net/QrvJN/9/

于 2013-04-17T02:15:59.427 回答