Javascript 淘汰检查绑定和微风子集合

我正在用热毛巾来做水疗，但我在用微风系列来检查Knockout的绑定时遇到了问题

我有一个用户列表和一个组列表。我希望能够通过选中一个复选框向组中添加或删除用户

如果我理解正确，我应该能够使用checkedValue选项在ObservalArray上使用选中绑定，并且它将根据复选框是否选中自动向该数组添加或删除项

我在服务器端有以下实体

public class Group
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<GroupUser> Users { get; set; } 
}

public class User
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<GroupUser> Groups { get; set; }
}

由于我有这个映射表，User.Groups属性是UserGroups而不是Groups的observableArray，因此我知道我不能直接将Groups属性绑定到复选框

我已经尝试为我的用户实体创建一个自定义构造函数，这样我就可以生成一个只包含组的计算observableArray供我使用。但是，当创建构造函数时，用户属性似乎都不存在，并且我的计算可观察对象在它们存在时不会更新

这是可能的还是我走错了方向？

下面是我失败的javascript尝试的片段：

var vm = {
    user: ko.observable(),
    groups: ko.observableArray();
    save: save,
    cancel: cancel
};

/* User entity constructor */
var User = function () {

    this.mappedGroups= ko.computed(function () {

        var target = this.Groups;
        var groupsArray = ko.observableArray([]);

        ko.utils.arrayForEach(target, function(userGroup) {
            groupsArray.push(userGroup.Group);
        });

        return groupsArray;
    }, this);
};

var serviceName = '/breeze/useradmin';
var store = new breeze.MetadataStore();
store.registerEntityTypeCtor('User', User);
var manager = new breeze.EntityManager({ serviceName: serviceName, metadataStore: store });

...

function loadGroups() {
    var query = breeze.EntityQuery.from('Groups');

    return manager.executeQuery(query).then(
        function (data) {
            vm.groups(data.results);
        }
    );
}

以及html：

<form>
    <input class="input-xxlarge "type="text" 
        name="name" placeholder="User Name" data-bind="value: Name" />

    <p>Groups</p>
    <div class="well well-small scroll-panel" data-bind="foreach: groups">
        <label class="checkbox">
            <input type="checkbox" data-bind="checkedValue: $data, checked:     
                $root.user.mappedGroups, attr: { value: Id }"/>
            <p data-bind="text: Description"></p>
        </label>
    </div>
    <div class="form-actions">
        <button class="btn btn-primary" data-bind="click: save">Save</button>
        <button class="btn" data-bind="click: cancel">Cancel</button>
    </div>
</form>

团体


拯救
取消

请查看文档中的“凉风”部分，该部分正好涵盖了此场景

---

示例代码用于角度应用程序。但是指南（特别是中的）将适用于淘汰应用程序。

我已经编写了自己的解决方法来代替这个答案，这个答案看起来很相似。但是在阅读之后，我重写了它，效率更高，所以干杯。基本上是RTFM。

<form>
    <input class="input-xxlarge "type="text" 
        name="name" placeholder="User Name" data-bind="value: Name" />

    <p>Groups</p>
    <div class="well well-small scroll-panel" data-bind="foreach: groups">
        <label class="checkbox">
            <input type="checkbox" data-bind="checkedValue: $data, checked:     
                $root.user.mappedGroups, attr: { value: Id }"/>
            <p data-bind="text: Description"></p>
        </label>
    </div>
    <div class="form-actions">
        <button class="btn btn-primary" data-bind="click: save">Save</button>
        <button class="btn" data-bind="click: cancel">Cancel</button>
    </div>
</form>