Knockoutjs - make select display the current value of an observable as default value

Question

Here is a fiddle : http://jsfiddle.net/BNXTm/1/

As you can see, even though the new consultant has the Commercial role, the select displays Consultant instead of Commercial . How can I make the select elements display the name of the consultant's role?

Answer 1

value binding compare objects references to match selected value.

The Role object in the list and the selected object does not share the same reference

http://jsfiddle.net/BNXTm/4/

var c1 = new Consultant("Foo BAR", ko.utils.arrayFirst(contractViewModel.availableRoles, function(item) {
    return item.tag === "Co";
}));

Answer 2

What you can do is create an computed which works with a plain value instead of objects:

self.role   = ko.observable(role);
self.role.forSelect = ko.computed({
    read: function() {
        return self.role().tag;
    },
    write: function(newValue) {
        self.role(contractViewModel.getRole(newValue));
    }
});

This way role will always be one of the objects in availableRoles .

See http://jsfiddle.net/eCkL9/