Question

我正在尝试将表绑定到下拉菜单。以下是我的要求：

下拉列表包含MENU列表。
一个菜单可以有许多关联的模块，这些模块显示在所选菜单项的表格中。
MODULE不必与菜单项关联，在这种情况下，所选菜单项之间会被视为共享。

这是我的屏幕示例：

INSERT SCREEN SHOT HERE

在该示例中，您可以看到CommonShellModule是共享的，这意味着将列出所有菜单的CommonShellModule。

这是我到目前为止所做的：

视图模型：

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
    }
}

型号：

从中映射的模型（这些模型被序列化并传递到此视图模型）：

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; }
}

查看：

...

<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>

...

问题是javascript handleSharedCheckboxClick无效，我不明白为什么。每次单击共享复选框时都会执行它，但是当我更新此函数中的模块值时，计算的knockout不会被重新计算，因此该表保存以前的值。

对于我可以做些什么来解决这个问题，我将不胜感激。

Answer 1

编辑：我的不好，用findle玩了一下，并且正在观察模块值，看起来问题就在这里：

self.handleSharedCheckboxClick = function (module) {

    if (self.isSharedModule(module)) {
        module.MenuId(null);
    }

如果共享该模块，则该值已为空，因此该值未被更改，修改该代码添加！，如下所示：

self.handleSharedCheckboxClick = function (module) {

    if (!self.isSharedModule(module)) {
        module.MenuId(null);
    }

使其按照您的意愿工作，在菜单项值更新之间保存共享状态（单击选中的复选框，该行不再共享，但绑定到当前菜单项，再次单击它然后返回共享）

jsfindle：http://jsfiddle.net/yj1s9qod/

Knockout点击处理程序不适用于使用ko.computed创建的表

1 个答案: