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 に答える