Question

I have been wrestling for this for a while and I need some help. I have a KO model and view model that I am using to render a view. In this case, the object is a band. this band has an observable array of albums. I just cant work out how to remove an album from the band model.

function band(item) {
    var self = this;
    self.name = ko.observable(item.name);
    self.country = ko.observable(item.country);
    self.state = ko.observable(item.state);
    self.city = ko.observable(item.city);
    self.emailAddress = ko.observable(item.emailAddress);
    self.albums = ko.observableArray(item.albums);
}

function User() {
    var self = this;
    self.bands = ko.observableArray([]);
    self.singleBand = ko.observable();

    //Get Bands from data source and create new models to add to bands array
    $.getJSON("/api/band", function (allData) {       
        $.each(allData, function (index, item) {
            self.bands.push(new band(item));
        });
    });

    //function to get a single band from a rendered list
    self.getThisBand = function (item) {
        self.bands = ko.observableArray(null);
        self.singleBand(item); 
    };

    //remove band from singleBands' album array
    self.removeAlbum = function (albumToDelete) {

        //how to delete album from band model
    };
}

ko.applyBindings(new User());

The logic is pretty simple, I am getting a list of bands and binding them to a list in the UI (no probs). When i click on a bands name in the UI I load the getThisBand method and populate UI (again no prob). I have bound the singleBand.albums array to a list, and that has the femoveAlbum onclick function. The data being passed to the function is the correct object too.

is there something fundamental I am missing?

Answer 1

Looks like self.singleBand() will be equal to the current band, so in your removeAlbum function you can do:

//remove band from singleBands' album array
self.removeAlbum = function (albumToDelete) {
    var band = self.singleBand();
    band.albums.remove(albumToDelete);
};