2

我有一个简单的下拉列表，其中包含一些虚拟数据，每次我使用敲除从下拉列表中选择一个项目时，我想填充表格的一行。

但我有几个问题：

  1. 不显示 optionValues 中的选项
  2. 默认的 LaborReservations 未显示
  3. 每次进行下拉选择时，我都不确定如何添加一行

我遵循了淘汰页面上的一些示例，但看不到如何使用下拉菜单执行我想要的操作。

HTML：

<h2>Add Labor to table</h2>
<select data-bind="options: optionValues"></select>
<br><br><br>   
<table>
    <thead><tr>
    <th>Labor name</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: labors">
        <tr>
            <td data-bind="text: name"></td>
        </tr> 
     </tbody>
</table>

JavaScript：

// Class to represent a row in the labors grid
function LaborReservation(name) {
    var self = this;
    self.name = ko.observable(name);
}

// Overall viewmodel for this screen, along with initial state
function LaborsViewModel() {
    var self = this;
    var viewModel = { optionValues: ["Test Labor Row 1", "Test Labor Row 2", "Test Labor Row 3"]};
    self.availableLabors = [{
        "LaborName": "Test Labor 1"
        },
        {
        "LaborName": "Test Labor 2"
        },
        {
        "LaborName": "Test Labor 3"
    }];

    // Editable data
    self.labors = ko.observableArray([
        new LaborReservation("Labor Item 1"),
        new LaborReservation("Labor Item 2")
    ]);

    self.addLabors = function() {
        self.labors.push(new LaborReservation(//want to add selected dropdown item
        ));
}

ko.applyBindings(new LaborsViewModel());

谢谢！

4

1 回答 1

1

您需要将您的选择绑定到某个值，并订阅它以添加到您的表中。例如：

self.newValue = ko.observable();
self.newValue.subscribe(function(value) {
    self.labors.push(new LaborReservation(value));
})

这个示例完成了您作为开始所要求的大部分内容：

http://jsfiddle.net/NzTSU/3/

于 2013-02-27T23:13:34.770 回答