how to bind to items within an observable array in knockout?

1
votes

I have the following observable array:

self.Profiles =ko.observableArray( ko.utils.arrayMap(initialData, function (profile) {
                return {
                    StartDate : formatDateOnly(profile.StartDate),
                    EndDate : formatDateOnly(profile.EndDate),
                    ProfileID :profile.ID,
                    ProfileName : profile.Name,
                    ProjectName : profile.ProjectName,
                    ReadingListID : profile.ReadingListID,
                    ReadingListName : profile.ReadingListName

                };
            }));

I want to bind a dropdown to the profiles to show the profile names, if the value of the drop down changes then I want to update span elements with the new corresponding values to the selected profileID.

<table id="readingListApplyToProfile" class="fullWidthTable">
        <tr>
            <td>
                Profile:
            </td>
            <td>
                <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID'"></select>
            </td>
        </tr>
        <tr>
            <td>
                End Date:
            </td>
            <td>
                <span data-bind="'text':EndDate"></span>
            </td>
        </tr>
    </table>

I cannot get the spans to update because the span elements are unaware of the dropdowns value, can anyone help me please. I am totally lost.

2
knockout.js
Maybe it would work to bind the select's value to a computedObservable that takes in a ProfileID and outputs the ProfileName of the correct Profile, and then bind the spans' text to the same computedObservable - jonhopkins
that probably would work but I dont want to do the same code for all the properties, Im hoping someone could show me a better solution. thanks - Farhad-Taran
Makes sense. This is a complete guess because I'm not so good at computedObservables, but would it be possible to output the whole Profile object, and bind to a specific property on the span? Like data-bind="text: getProfile.ProfileName" or something like that? - jonhopkins
How many such drop downs do you have? Is this just a single drop down and a span? - Sujesh Arukil
yes, its a single dropdown - Farhad-Taran

2 Answers

3
votes

What you are missing is a value binding on the drop down list. Here is a fiddle I created.

http://jsfiddle.net/sujesharukil/sBZvb/1/

<select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: selectedProfileId ">

And here is the viewmodel

var myViewModel = function()
{
    var self = this;
        this.Profiles =ko.observableArray([{
                    StartDate : '02/01/2012',
                    EndDate : '01/01/2013',
                    ProfileID :10,
                    ProfileName : 'Some Name',
                    ProjectName : 'Some Project',
                    ReadingListID : 100,
                    ReadingListName : 'Some List',
                },
                {
                    StartDate : '12/01/2012',
                    EndDate : '02/27/2013',
                    ProfileID :12,
                    ProfileName : 'New Name',
                    ProjectName : 'New Project',
                    ReadingListID : 200,
                }]);
    this.selectedProfileId = ko.observable({}); //this stores the selected id

}

ko.applyBindings(new myViewModel());

Hope that helps.

Suj

2
votes

I had the idea of a computedObservable that takes in a ProfileID and outputs the Profile corresponding to that ID, and then binding the spans to the various properties of the outputted object. Surprisingly, it worked. I was messing around with Sujesh Arukil's fiddle to try my idea so the model is very similar.

Working example showing multiple spans: http://jsfiddle.net/jonhopkins/fgZNQ/2/

The Model:

var myViewModel = function()
{
    var self = this;
        self.Profiles =ko.observableArray([{
                    StartDate : '02/01/2012',
                    EndDate : '01/01/2013',
                    ProfileID :10,
                    ProfileName : 'Some Name',
                    ProjectName : 'Some Project',
                    ReadingListID : 100,
                    ReadingListName : 'Some List',
                },
                {
                    StartDate : '12/01/2012',
                    EndDate : '02/27/2013',
                    ProfileID :12,
                    ProfileName : 'New Name',
                    ProjectName : 'New Project',
                    ReadingListID : 200,
                }]);

    self.selectedProfileId = ko.observable();

    self.getProfile = ko.computed({
        read: function() {
            for (var i = 0; i < self.Profiles().length; i++) {
                if (self.Profiles()[i].ProfileID == self.selectedProfileId()) {
                    return self.Profiles()[i];
                }
            }
            // in case there was no match, output a blank Profile
            return [{
                    StartDate : '',
                    EndDate : '',
                    ProfileID : '',
                    ProfileName : '',
                    ProjectName : '',
                    ReadingListID : '',
                    ReadingListName : ''
            }];
        },
        write: function(value) {
            self.selectedProfileId(value);
        },
        owner: self
    });
}

ko.applyBindings(new myViewModel());

EDIT: Sujesh suggested a much better version of the computedObservable.

self.getProfile = ko.computed(function(){
    var profile = ko.utils.arrayFirst(self.Profiles(), function(prof){
        return prof.ProfileID == self.selectedProfileId();
    });

    return profile || {};
});

The HTML:

<table id="readingListApplyToProfile" class="fullWidthTable">
    <tr>
        <td>
            Profile:
        </td>
        <td>
            <select id="cboProfile" name="cboProfile" data-bind="options: Profiles, optionsText: 'ProfileName', 'optionsCaption': 'Select profile...', optionsValue:'ProfileID', value: getProfile "></select>
        </td>
    </tr>
    <tr>
        <td>
            End Date:
        </td>
        <td>
            <span data-bind="text: getProfile().ProfileName"></span>
        </td>
    </tr>
</table>