Question

我正在使用HotTowel来构建SPA，但是我遇到了将Knockout的检查绑定与Breeze集合一起使用的问题。

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

如果我理解正确，我应该能够在带有checkedValue选项的observableArray上使用已检查的绑定，并且它会根据是否选中这些框自动添加或删除该数组。

我在服务器端有以下实体。

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

由于Breeze在没有显式映射表的情况下无法处理多对多的关系，我也有

public class UserGroup
{
    [Key, Column(Order=0)]
    [ForeignKey("User")]
    public int UserId { get; set; }

    [Key, Column(Order=1)]
    [ForeignKey("Group")]
    public int GroupId { get; set; }

    public Group Group { get; set; }
    public User User { get; set; }
}

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

我已经尝试为我的User实体创建一个自定义构造函数，这样我就可以生成一个只有Group的计算observableArray供我使用。但是，在创建构造函数时，似乎没有任何User属性存在，并且我的计算observable不会更新。

这是可能的还是我对此采取了错误的方式？

这是我失败的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>

Answer 1

请查看文档中“酷微风”部分中的"Presenting many-to-many"，其中详细介绍了此情景。

示例代码适用于Angular应用程序。但是指导（特别是在the plunker example's readme.md file中将适用于Knockout应用程序。

Knockout检查了绑定和Breeze子集合

1 个答案: