optionsText不应用于我的击倒选择对象

我在我的第一次淘汰赛经验中工作，并且已经学到了很多。我试图做的是填充一个新对象，并将其推入viewModel中显示。

选择框(下拉框)正在填充，但当我单击add时，对象名称为空白。然后我突然想到，我有两个字段需要收集来组装对象所以我不确定我是否正确处理这个问题....

我的数据模型:

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

视图:

<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>

输入ID="duration"不工作/填充正确，但我正在努力获得模型数据更新....(这是一个次要问题，我稍后会讨论，所以这里有语法问题，这就是为什么)

要添加的脚本从按钮点击:

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

运行时，下表中的ColorName为空，但会添加一个空条目。

显示/更新表:

<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>

是我正在做的方式添加一个对象到数组为新创建的对象?我没有看到SelectedColor。SelectedText或任何类似的东西。如何访问选择下拉列表的文本属性?