Question

我正在寻找一些关于处理两个对象数组（一个是另一个对象的子集）和复选框的最佳方法的建议。

基本上我以fiddler为例。我实际使用的代码完全依赖于数据库支持和所有内容。

我正在尝试在一整套成员和一个选定的成员子集之间实现复选框之间的绑定。

// member model
var Member = function(item) {
    var self = this;

    self.id = item.id;
    self.avatar = item.avatar;
    self.name = item.name;
};

基本上我有以下模型，其中包含三个我不会修改的属性。

// card model
var Card = function (item) {
    var self = this;

    self.cardId = item.id;
    self.title = ko.observable(item.title);
    self.description = ko.observable(item.description);
    self.contentItemId = ko.observable(item.contentItemId);
    self.dueDate = ko.observable("");
    self.comments = ko.observable(0);
    self.openItems = ko.observable(0);
    self.completedItems = ko.observable(0);
    self.labels = ko.observable("");
    self.members = ko.observable("");
    ...
};

这就是魔术需要发生的地方。根据定义，数据库将成员存储为逗号分隔列表，例如（” 1,2,3,4,5" ）。我已经编写了代码来检索成员和个人成员的完整列表以填充

    self.members = ko.observable([]);

我正在考虑用适当的会员更新个人卡，因为这是第一次初始化卡片。

到目前为止一切顺利！

在视图中，我想触发 self.editMembers 功能，根据定义，该功能应隐藏 cardLeftColumn 中的所有内容（可能除了卡片标题之外）并显示完整列表（表格）有两个额外按钮的成员保存和关闭。

到目前为止一直很好！？

我现在的主要问题是，hrm，我怎么说这个，复选框。当我打电话给 self.editMembers 时，我想要在 Card.members 数据集中检查这些用户的复选框。只是为了澄清 Card.members 将包含 Board.members 数组的子集（尚未定义）。

如果您看一下fiddler，我会注意到我在表格行上绑定了 Card.members 列表，那是因为我不知道如何实现目标我期待着完成。

我也不确定如何在保存操作中检索所选成员列表（我需要将其保存在数据库中）。

我不确定的另一件事是如何绑定卡上的编辑链接/按钮，以便分配给特定卡的成员（ Card.members ）可见。在这个离开的任何建议将派上用场，但不是一个显示塞子。我还没有确定我将确定哪个用户正在查看该页面的方式。但是非常喜欢用户ID 。换句话说，我可能最终会将网页浏览者的用户ID 与 Card.members.id 进行比较，以确定是否修改链接/按钮可供他们使用。

总结一下，我正在寻找以下建议：
1.如何链接两个数据集之间的复选框
2.如何在保存操作中获取已检查成员列表 3.以及如何隐藏未分配给卡的用户编辑链接/按钮的一些建议

感谢您抽出宝贵时间阅读我的帖子。

更新1

在我所指的我的例子中添加了fiddler链接。

所以回顾一下@Haridarshan在下面提供了一些有趣的建议。

昨晚我从数据库中获取了所有成员的列表，并将其添加为

self.members = ko.observable([]);

BoardViewModel上的

。就在我用他们的卡初始化列表之前我获取并初始化了一个成员列表。

我还获取了分配给每张卡的个人会员，并在每张卡上初始化self.members = ko.observable([]);。

实际上我是要将BoardViewModel中的所有成员数组绑定到表中但是我结束了一个错误，我的BoardViewModel.members在当前上下文中是未定义的，这是真的，因为我试图绑定的表也将在Card.members的背景。

我需要在@Haridarshan提供的建议下涂一点。所以我们将看到我从这里得到的地方。

更新2

使用@Haridarshan的一些建议我设法使用if: function(ref) - Click me绑定编辑链接/按钮。不是100％工作，但它几乎在那里。

我使用self.isChecked = ko.observable(false);扩展了模块模型，现在我可以获得所选的成员。这意味着我可以将新的已分配成员列表发送到数据库。

这仍然存在将所有成员绑定到表的问题。我试过了$root.members但没有给我我追求的结果。但即使这样，我仍然不确定如何将该列表交叉检查到 Card.members 。我可能最终会修改 self.editMembers 功能来执行此操作。

Answer 1

据我所知 self.members observable包含会员模型。因此，您可以通过映射将数据映射到self.members。假设 self.members是一个可观察数组，数据是来自数据库的成员详细信息的响应数据。

self.members(jQuery.map(data, function (item) {
    return new Member(item);
}));

在html中，使用foreach绑定，显示所有成员列表和复选框。因此，您需要在成员模型中添加checkbox observable。

var Member = function(item){
    var self = this;

    self.id = item.id;
    self.avatar = item.avatar;
    self.name = item.name;
    self.isChecked = ko.observable(false);
    self.isVisible = ko.observable(<conditional statement whether to hide or show>);
}

并假设您正在显示此类数据

<!--ko foreach: members-->
    <input type="checkbox" data-bind="visible: isVisible, checked: isChecked" />
    <div data-bind="text: id"></div>
    <div data-bind="text: avatar"></div>
    <div data-bind="text: name"></div>
<!-- /ko -->

现在，您希望为每个成员提供编辑功能，因此编辑方法应该绑定到成员模型

var Member = function(item){
    var self = this;

    self.id = item.id;
    self.avatar = item.avatar;
    self.name = item.name;
    self.isChecked = ko.observable(false);
    self.isVisible = ko.observable(<conditional statement whether to hide or show>);

    self.editMember = function(data){
        // here you will do the edit functionality 
    }
}

此外，为了隐藏未分配给卡的用户的编辑按钮/链接，可以向成员模型添加可见的observable，并在复选框绑定中添加可见的绑定。

对于保存操作，因为您需要检查该成员应添加到项目模型的整个成员列表。

var Card = function (item) {
    var self = this;
    ...
    ...
    self.Save = function(data){
        //using ko.utils.arrayForEach, loop through all members and check for isChecked observable
        // and do whatever you want to do.
    }
}

Knockout绑定多个可观察数组

更新1

更新2

1 个答案: