javascript - 如何将 observableArray 中的 observable 复制到另一个 observableArray？

Question

我是 JS 和 Knockout 的新手。我想将 observableArray 中的特定 observable 复制到另一个 observableArray。我怎样才能做到这一点？

HTML

<table>
    <thead>
        <tr>
            <th>Passenger Name</th>
            <th>Meal</th>
            <th>Amount ($)</th>
            <th></th>
        </tr>
    </thead>
    @*render a copy of seats child elements for each entry in the seats array*@
    <tbody data-bind="foreach: seats">
        <tr>
            <td data-bind="text: name"></td>
            @*update the view to make use of the formatted Price*@
            <td>
               <select data-bind="options: $root.availableMeals, 
                                  value: meal, optionsText: 'mealName'">
               </select>
            </td>
            <td data-bind="text: formattedPrice"></td>
            <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
        </tr>
    </tbody>
</table>

要求

Answer 1

我创建了一个 JS fiddle 显示了如何使用以下代码在可观察数组之间移动项目:

HTML

<p>first list:</p>
<table>
    <tbody data-bind="foreach: contents">
        <td> <strong>
                 <span id="textKey" data-bind="text: displayKey" />    
            </strong>
        </td>
        <td>
            <input id="textValue" type="text" data-bind="value: displayValue" />
        </td>
        <td>
            <input type="button" data-bind="click: $root.copyItem" value="select" />
        </td>
    </tbody>
</table>

<p>Second list:</p>

<table>
    <tbody data-bind="foreach: selectedContents">
        <td> <strong>
                 <span id="textKey" data-bind="text: displayKey" />    
            </strong>
        </td>
        <td>
            <input id="textValue" type="text" data-bind="value: displayValue" />
        </td>       
    </tbody>
</table>

查看模型:

function ViewModel() {
    var self = this;

    self.contents = ko.observableArray([{
        "displayKey": "Fruit",
            "displayValue": "Bananas"
    }, {
        "displayKey": "Colour",
            "displayValue": "Red"
    }, {
        "displayKey": "Car",
            "displayValue": "Ferrari"
    }]);
    self.selectedContents = ko.observableArray([]);

    self.copyItem = function(item) {
        self.selectedContents.removeAll();
        self.selectedContents.push(item);
    }
}
ko.applyBindings(new ViewModel());