Similar to this post...

This is my property view model:

function propertyViewModel() {
    var self = this;
    self.propertyTypeList = ko.observableArray([]);
    self.selectedPropertyType = ko.observable();
}

This is my model for property type:

function propertyTypeModel(id, name) {
    this.Id = ko.observable(id);
    this.Name = ko.observable(name);
}

I fetch the data from the database with signalR and call the following client-side functions on success:

connection.client.populatePropertyTypeList = function (propertyTypeList) {
    var mappedTypes = $.map(propertyTypeList, function (item) {
        return new propertyTypeModel(item.Id, item.Name);
    });
    self.propertyTypeList(mappedTypes);
};

and:

connection.client.populatePropertyDetails = function (property) {
    self.selectedPropertyType(new propertyTypeModel(property.PropertyType.Id, property.PropertyType.Name));
};

First one populates the observable array with all possible property types and second one gets the relevant property type and binds it to selectedPropertyType.

Everything works as expected until I try to introduce a drop-down list and pre-populate it with the name of selectedPropertyType as follows:

<select data-bind="options: propertyTypeList, optionsText: 'Name', value: selectedPropertyType"></select>

This makes my observable object (selectedPropertyType) change its value to the first available option on the list. My understanding is that while this list is rendered propertyTypeList is not populated yet and causes selectedPropertyType to default to the first available value, but then why does Knockout not update the object while calling connection.client.populatePropertyDetails?

I can bind a select list to the Id if I introduce a new object holding the Id only, however I would like to have it bound to the whole selectedPropertyType object. Is it possible?

Similar to this post...

This is my property view model:

function propertyViewModel() {
    var self = this;
    self.propertyTypeList = ko.observableArray([]);
    self.selectedPropertyType = ko.observable();
}

This is my model for property type:

function propertyTypeModel(id, name) {
    this.Id = ko.observable(id);
    this.Name = ko.observable(name);
}

I fetch the data from the database with signalR and call the following client-side functions on success:

connection.client.populatePropertyTypeList = function (propertyTypeList) {
    var mappedTypes = $.map(propertyTypeList, function (item) {
        return new propertyTypeModel(item.Id, item.Name);
    });
    self.propertyTypeList(mappedTypes);
};

and:

connection.client.populatePropertyDetails = function (property) {
    self.selectedPropertyType(new propertyTypeModel(property.PropertyType.Id, property.PropertyType.Name));
};

First one populates the observable array with all possible property types and second one gets the relevant property type and binds it to selectedPropertyType.

Everything works as expected until I try to introduce a drop-down list and pre-populate it with the name of selectedPropertyType as follows:

<select data-bind="options: propertyTypeList, optionsText: 'Name', value: selectedPropertyType"></select>

This makes my observable object (selectedPropertyType) change its value to the first available option on the list. My understanding is that while this list is rendered propertyTypeList is not populated yet and causes selectedPropertyType to default to the first available value, but then why does Knockout not update the object while calling connection.client.populatePropertyDetails?

I can bind a select list to the Id if I introduce a new object holding the Id only, however I would like to have it bound to the whole selectedPropertyType object. Is it possible?

• javascript
• knockout.js

1 Answer 1

You create a new object in your populatePropertyDetails callback.

Even though it has the same property values for this.Id and this.Name as the corresponding object in propertyTypeList, it is not the same object.

Try changing your callback to this:

connection.client.populatePropertyDetails = function (property) {
    var type = property.PropertyType,
        list = self.propertyTypeList();

    var foundType = ko.utils.arrayFirst(list, function(item) {
        return item.Id() == type.Id && item.Name() == type.Name;
    });
    if(foundType) {
        self.selectedPropertyType(foundType);
    }
};