My goal is to connect a table to a drop-down menu. Here are the key points of what I'm trying to achieve:
The drop-down should list MENUs.
Each MENU can have multiple MODULES associated with it, which will be displayed in the table based on the selected menu item.
A MODULE doesn't necessarily have to be linked to a specific MENU, and in such cases, it is considered as SHARED among all selected menu items.
Here's an example interface that I currently have:
In this illustration, you can observe that the CommonShellModule is shared, indicating that it will appear for all menus.
This is the progress I've made so far:
ViewModel:
var ModuleIndexViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);
self.selectedMenu = ko.observable();
self.selectedMenuModules = ko.computed(function () {
if (self.selectedMenu()) {
//display modules for the selected menu or where they are not associated to a menu
var modules = ko.utils.arrayFilter(self.Modules(), function (module) {
return self.isModuleAssociatedToCurrentMenuSelection(module) || self.isSharedModule(module);
});
//return a sorted list of modules
return modules.sort(function (left, right) {
return left.Name() > right.Name() ? 1 : -1;
});
}
return null;
});
self.isModuleAssociatedToCurrentMenuSelection = function (module) {
if (self.selectedMenu()) {
return module.MenuId() == self.selectedMenu().Id()
}
return false;
}
self.isSharedModule = function (module) {
return module.MenuId() == null;
}
self.handleSharedCheckboxClick = function (module) {
if (self.isSharedModule(module)) {
module.MenuId(null);
}
else {
module.MenuId(self.selectedMenu().Id());
}
return true; //allow the default click event action
}
}
Models:
The models being mapped from (these models are serialized and passed into this view model):
public class IndexViewModel
{
public IEnumerable<MenuViewModel> Menus { get; set; }
public IEnumerable<ModuleViewModel> Modules { get; set; }
}
public class MenuViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
public class ModuleViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public int? MenuId { get; set; }
}
View:
...
<div class="form-group top-buffer">
<label class="control-label" for="menu">Menu</label>
<select id="menu" class="form-control" data-bind="options: Menus, optionsText: 'Name', value: selectedMenu"></select>
</div>
<div class="row top-buffer">
<div class="col-lg-12">
<table class="table table-striped">
<thead>
<tr>
<th class="col-lg-6">Module Name</th>
<th class="col-lg-3">Shared</th>
<th class="col-lg-3"></th>
</tr>
</thead>
<tbody data-bind="foreach: selectedMenuModules">
<tr>
<td data-bind="text: Name"></td>
<td><input type="checkbox" data-bind="checked: $parent.isSharedModule($data), click: $parent.handleSharedCheckboxClick" /></td>
<td><a href="#">Edit</a> | <a href="#">Details</a> | <a href="#">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
...
The issue I'm facing is that the javascript handleSharedCheckboxClick isn't functioning as expected, and I'm unsure why. It gets triggered every time a shared checkbox is clicked, but when I update the module value within this function, the knockout computed isn't recalculated, leading to the table retaining the previous values.
I would appreciate any advice on how to resolve this matter.