Question

I want to be able to display the date based on selection of a dropdown. The dropdown is populated from a ViewModel in MVC3 and serialized as Json when the page loads.

I tried playing around with subscribe, change, and so on with no avail. When you pick a unit in the jsfiddle link below, the Event Date should be populate in that textbox on the right side as a default value — the user would still be able to change it. We have that information in the unitDropDown observable array. I am probably dense as I see how in other examples, and for me it just won’t click so to speak.

I’m guessing I would have to add some event into the addEvent observable? Then also set subscribe to the dropdown somehow?

addEvent: function() {
    this.phaseUnits.push(new PhaseUnitModel('0', '1', '0', 'N', '')); // defaults
}

Here is the working example in jsFiddle for it: http://jsfiddle.net/robcube/eFAmu/

UPDATE (the fix):

function PhaseUnitModel(Id, PhaseDetailId, UnitId, eventType, eventDate, deleteFlag) {
        var self = this;
        self.Id = ko.observable(Id);
        self.PhaseDetailId = ko.observable(PhaseDetailId);
        self.UnitId = ko.observable(UnitId);
        self.eventType = ko.observable(eventType);
        self.eventDate = ko.observable(eventDate);
        self.deleteFlag = ko.observable(deleteFlag);
        self.markForDeleteText = ko.observable();

        self.UnitId.subscribe(function(newValue) {
            for (i in unitDropDown) {
                if (unitDropDown[i].Id == newValue)
                    self.eventDate(unitDropDown[i].OnlineDate);
            }
        }.bind(this));
    }

Answer 1

Is this what you are looking for?

function PhaseUnitModel(Id, PhaseDetailId, UnitId, eventType, eventDate, deleteFlag) {
    this.Id = ko.observable(Id);
    this.PhaseDetailId = ko.observable(PhaseDetailId);
    this.UnitId = ko.observable(UnitId);
    this.eventType = ko.observable(eventType);
    this.eventDate = ko.observable(eventDate);
    this.deleteFlag = ko.observable(deleteFlag);
    this.markForDeleteText = ko.observable();

    this.UnitId.subscribe(function(newValue) {
        for (i in unitDropDown) {
            if (unitDropDown[i].Id == newValue)
                this.eventDate(unitDropDown[i].OnlineDate);
        }
    }.bind(this));
}