敲除绑定多个可观察数组

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("");
    ...
};

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

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

我的想法是用适当的会员更新个人卡，因为卡是第一次初始化。

到目前为止一切顺利！

在视图中我想触发 self.editMembers 函数，根据定义该函数应该隐藏 cardLeftColumn 中的所有内容（可能除了 Cards 标题）并显示完整列表（成员表），带有两个附加按钮，分别用于保存和关闭。

到目前为止一切顺利！？

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

如果您查看fiddler，您会注意到我在表格行上绑定了 Card.members 列表，因为我不确定如何实现我的目标期待完成。

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

我不确定的另一件事是如何将卡片上的编辑链接/按钮绑定到分配给特定卡片（Card.members）的成员可见。这次离开中的任何建议都会派上用场，但不会起到阻碍作用。我还没有完全确定我将如何确定哪个用户正在查看该页面。但是很喜欢成为users id。换句话说，我可能最终会将页面查看者的 user id 与 Card.members.id 进行比较，以确定是否要使用 edit 链接/按钮可供他们使用。

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

感谢您花时间阅读我的帖子。

更新 1

在我提到的示例中添加了提琴手链接。

因此，回顾一下@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 包含 Members 模型。因此，您可以通过映射将您的数据映射到 self.members。假设 self.members 是一个 observable 数组，data 是数据库中 Member Details 的响应数据。

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

在 html 中，使用 foreach 绑定，您可以使用复选框显示所有成员列表。因此，您需要在 Member 模型中添加可观察的复选框。

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

现在，您希望对每个成员都有编辑功能，因此应该将 edit 方法绑定到 Members 模型

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

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

对于 Save 操作，因为您需要检查该方法的整个成员的列表，所以应该将方法添加到项目模型中。

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