javascript - KnockoutJS - Binding a select option to an object - Stack Overflow

admin管理员组

文章数量:1429475

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

Share Improve this question Follow edited May 23, 2017 at 11:50 CommunityBot 111 silver badge asked May 17, 2013 at 8:45 JerryJerry 1,78255 gold badges3030 silver badges4242 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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);
    }
};

本文标签： javascriptKnockoutJSBinding a select option to an objectStack Overflow