Knockout JS remove option if value is greater than (on foreach)

Question

I have a json array that has a device name and quantity. If the quantity is two and the user adds two items to the foreach for that name (they select from the drop down field) I'd like to hide that device name option from the drop down menu.

*Edit* Rune seems that he has the correct answer, however I cannot figure out how to integrate it into my code. Here is my code: http://jsfiddle.net/QTUqD/1/


    
        
            
                Extension
                Name
                Email
                Voicemail Pin
                Device
                MAC Address
                Ship To
                
            
        
       
    

    
     Add Extension
    

    
        Previous
        
            
        
        Next
    

    

    

    


    
        
            
                Extension
                Name
                Email
                Voicemail Pin
                Device
                MAC Address
                Ship To
                
            
        
       
    

    
     Add Extension
    

    
        Previous
        
            
        
        Next

window.ExtListViewModel = new function () {
    var self = this;
    window.viewModel = self;

    self.list = ko.observableArray();

    self.pageSize = ko.observable(10);
    self.pageIndex = ko.observable(0);
    self.selectedItem = ko.observable();
    self.extQty = ko.observable();
    self.devices = ko.observableArray(['devices']);


    self.addressList = ko.observableArray(['addressList']);
    self.edit = function (item) {
        if($('#extMngForm').valid()) {
            self.selectedItem(item);
        }
    };

    self.cancel = function () {
        self.selectedItem(null);
    };

    self.add = function () {
        if($('#extMngForm').valid()) {
            var newItem = new Extension();
            self.list.push(newItem);
            self.selectedItem(newItem);
            self.moveToPage(self.maxPageIndex());
        }
    };
    self.remove = function (item) {

            if (confirm('Are you sure you wish to delete this item?')) {

                    self.list.remove(item);
                    if (self.pageIndex() > self.maxPageIndex()) {
                        self.moveToPage(self.maxPageIndex());
                    }

            }
            $('.error').hide();
    };
    self.save = function () {
        if($('#extMngForm').valid()) {
            self.selectedItem(null);
        };
    };

    self.templateToUse = function (item) {
        return self.selectedItem() === item ? 'editExts' : 'extItems';
    };

    self.pagedList = ko.dependentObservable(function () {
        var size = self.pageSize();
        var start = self.pageIndex() * size;
        return self.list.slice(start, start + size);
    });
    self.maxPageIndex = ko.dependentObservable(function () {
        return Math.ceil(self.list().length / self.pageSize()) - 1;
    });
    self.previousPage = function () {
        if (self.pageIndex() > 0) {
            self.pageIndex(self.pageIndex() - 1);
        }
    };
    self.nextPage = function () {
        if (self.pageIndex() < self.maxPageIndex()) {
            self.pageIndex(self.pageIndex() + 1);
        }
    };
    self.allPages = ko.dependentObservable(function () {
        var pages = [];
        for (i = 0; i <= self.maxPageIndex() ; i++) {
            pages.push({ pageNumber: (i + 1) });
        }
        return pages;
    });
    self.moveToPage = function (index) {
        self.pageIndex(index);
    };


};


ko.applyBindings(ExtListViewModel, document.getElementById('extMng'));

function Extension(extension, name, email, vmpin, device, macAddress, shipTo){
    this.extension = ko.observable(extension);
    this.name = ko.observable(name);
    this.email = ko.observable(email);
    this.vmpin = ko.observable(vmpin);
    this.device = ko.observable(device);
    this.macAddress = ko.observable(macAddress);
    this.shipTo = ko.observable(shipTo);
}

antishok · Accepted Answer

Here's an approach based on adding a new computed for available devices on the main viewmodel object, plus a helper function. It's not ideal for all cases and there's probably ways to simplify this, but I've run out of juice for now :P

self.availableDevices = ko.computed(function() {        
    var usedQuantities = {}; // for each device id, store the used quantity
    ko.utils.arrayForEach(self.list(), function(item) {
        var device = item.device();
        if (device) {
            usedQuantities[device.id] = 1 + (usedQuantities[device.id] || 0);
        }
    });

    return ko.utils.arrayFilter(self.devices(), function(device) {
        var usedQuantity = usedQuantities[device.id] || 0;
        return device.quantity > usedQuantity;
    });
});


// need this to add back item's selected device to its device-options,
// and to maintain original order of devices
self.devicesForItem = function(item) {        
    var availableDevices = self.availableDevices();
    return ko.utils.arrayFilter(self.devices(), function(device) {
        return device === item.device() || availableDevices.indexOf(device) !== -1;
    });
}

and the corresponding binding (note: no use of optionsValue):

Updated JSFiddle: http://jsfiddle.net/antishok/QTUqD/6/

Some other small changes I made to your fiddle so it'll work: changed extQty to 20, added example devices, fixed element ID for ko.applyBindings, commented form validation stuff.. maybe a couple more ;p (also included different bootstrap css)

Knockout JS remove option if value is greater than (on foreach)

Answers (2)

Related Questions