Disabling / Deleting Selecting options created by binding knockout options

Question

I have a number of options that the user can select, which I can track through the observed array. The array itself is loaded from the Model, which I bring to the knockout using the knockout mapping extension (ko.mapping.fromJS). Everything is working fine.

An explanation of this will be verbose and may cause more confusion to see the diagram below:

Basically:

• I have an input form on the Internet (its configurator)
• The list of elements is quite large, I would say that 10 or so possible elements can be added to the configuration
• When the user adds an item, I click "Item A" by default on the array bound to the parameters, and it displays just fine.
• What I'm trying to do is delete item A after selecting it after adding it once. If it is deleted, it must be able to be re-added.
• All this happens through KO observables - one to track the available options, and the other to track the "Selected" options. As I said, everything works fine, and I'm trying to configure it based on the request.

Initially - I thought - I would just let users add duplicates and handle cheats through verification - if this is the only option, I will most likely return to it.

I found " Postprocessing the generated parameters ", but the presented example declares an array in a string, and I'm not sure how I can bind this type of call to the observed array, I have auto map using the display extension.

In a nutshell, I wonder if anyone has an idea on how to disable the previous selection (remember that ALL selections are in one observable array, and SELECTED in another) - or is it impossible to source my data. Thus, in the bright pink highlighted annotation in the image - I would ideally like only “Item B and Item C”, but if ITEM A can be turned off , this will work too.

I don't know if jQuery DOM manipulation will be viable? This should happen after data binding and can become messy.

Depending on the answer here, my next screen has TWO strong> cascading drop-down lists, and I thought about applying the same unique approach to selection - but to combination.

Some code (simplified to protect the perpetrators)

public class ItemsModel { public List<ItemTypes> ItemTypes{ get; set; } public List<SelectedItemTypes> SelectedItemTypes{ get; set; } } public class ItemTypes { public int Id { get; set; } public string Description { get; set; } } public class SelectedItemTypes { public int Id { get; set; } public decimal Amount { get; set; } } 

** Javascript / HTML (again cut off for relevant parts) **

  self.worksheetitems = ko.mapping.fromJS(@Html.Raw(Model.ToJson())) /* Adds an Item */ self.addItem= function () { self.worksheetitems .SelectedItemTypes.push({ 'Id': ko.observable(), 'Amount': ko.observable(0)}); 

The Html table that contains this material (pay attention to foreach through the selected elements and binding to an array of all elements):

  <!-- Items --> <tbody data-bind= "visible: worksheetitems.SelectedItemTypes().length > 0, foreach: worksheetitems.SelectedItemTypes"> <tr> <td> <select data-bind= "options: $root.worksheetitems.ItemTypes(), optionsText: 'Description', optionsValue: 'Id', value: Id"></select> </td> <tr/> <!-- Snipped --> <button data-bind="click: $root.addItem">Add</button> <!-- Add Another Item --> 

Answer 1

Not sure if I understand correctly, but it looks like you are looking for Computed Observables :

 self.AvailableItemTypes = ko.computed(function() { var selectedTypeIds = this.SelectedItemTypes().map(function(el) { return el.Id; }); return this.ItemTypes().filter(function(el) { return selectedTypeIds.indexOf(el.Id) === -1; }); });