optionsText is not applying in my knockout select object

Question

I'm working with in my first knockout experience and have been learning quite a bit. What I'm attempting to do is populate a new object and push it into the viewModel for display.

The select box ( drop down box) is populating but when I click on add, the object name is blank. Then it occurred to me, I have two fields I need to collect from to assemble the object so I'm not sure I'm going about this the right way....

My data model:

    function Colors(data) {
    this.ID = ko.observable(data.ID);
    this.ColorName = ko.observable(data.ColorName);
    this.Duration = ko.observable(data.Duration);
}

View:

<table id="NewColor">
<tbody>
    <tr>
        <td>
            <select id="SelectColor" data-bind="options: AllColors, optionsText: 'ColorName', value: AllColorss.ID, optionsCaption: 'Select Color...'"></select>
            <input id="Duration" data-bind="value: Duration" />
            <button data-bind='click: addColor'>Add Color</button>
        </td>
    </tr>
</tbody>

The input ID="duration" isn't working / populating right but I'm working on getting the model data to update.... (This is a side issue I'll look at later so of there's syntax issues there, that's why)

The script to add from the button click:

        self.addColor = function() { self.AddColors.push(new Color(NewColor )) };

When that runs, the ColorName is blank in the following table but a blank entry is added.

Display / update table:

<table>
<thead>
    <tr>
        <th padding: 10px; >Color</th>
        <th padding: 10px; >Duration</th>
    </tr>
</thead>
<tbody data-bind="foreach: AddColors">
    <tr>
        <td data-bind="text: ColorName"></td>
        <td data-bind="text: Duration"></td>
        <td>
            <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
        </td>
    </tr>
</tbody>

Is what I'm doing the way to add an object into the array for the newly created object? I don't see a SelectedColor.SelectedText or anything similar. How do I access the text property of the select drop down list?

Answer 1

I'm not sure if what I was doing before would work but I backed off what I had and added in the select box after the line was added which was the same thing the tutorial was doing. That worked. I can't thank you enough, Robert.