在淘汰表.js中填充选择

Question

我在淘汰表中有一个数量选择选项，但我想根据可用库存为其设置最大限制。

说我的条目具有以下值

ID = 1
stock = 8

我想在数量字段中填充数字1-stock，在这种情况下为1-8。 数量将始终小于或等于库存。

function ItemEntry(ID, stock, quantity) {
    var self = this;
    self.ID= ID;
    self.stock= stock;
    self.quantity = quantity;

}

// viewmodel
function EntryViewModel() {
    var self = this;

    self.itemNumbers = ko.observableArray([
        new ItemEntry("1", 8, QUANTITY HERE!) //initial starting values
    ]);

    self.removeItem = function(item) { self.itemNumbers.remove(item) }
}

//custom binding for dropdown outside of models
ko.bindingHandlers.quantityDropdown = {
        update: function(quantityDropdown, stock, EntryViewModel) {
            var quantity = ko.utils.unwrapObservable(stock());
            for(var i = 0; i < stock(); i++)
            {
               $(quantityDropdown).append('<option value="' + i + '">' + i + '</option>');
            }
        }
    };

ko.applyBindings(new EntryViewModel());

这是HTML

  <table border="1">
  <thead><tr>
        <th>ID</th><th>Stock</th><th>Quantity</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: itemNumbers">
        <tr>
            <td data-bind="text: ID"></td>
            <td data-bind="text: stock"></td>
            <td><select data-bind="quantityDropdown: quantity"></select></td>
            <td><a href="#" data-bind="click: $root.removeItem">Remove</a></td>
        </tr>    
    </tbody>
</table>

Answer 1

在视图模型代码之外创建自定义绑定：

ko.bindingHandlers.quantityDropdown = {

    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var quantity = ko.utils.unwrapObservable(valueAccessor());
        for(var i = 1; i < quantity + 1; i++)
        {
            // Add each option element to the select here
            $(element).append('<option value="' + i + '">' + i + '</option>');
        }
    }
};

然后将绑定更改为：

<td><select data-bind="quantityDropdown: stock"></select></td>