淘汰赛检查绑定和微风儿童收集

我使用HotTowel来建立一个SPA，但我有问题获取淘汰赛的检查绑定工作与微风收集。淘汰赛检查绑定和微风儿童收集

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

如果我的理解正确，我应该能够在checkedValue选项上使用checkedableArray上的checked检查绑定，并根据是否选中该框自动向该数组添加或移除项目。

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

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

而且，由于没有明确的映射表微风无法处理多对多的关系，我也有

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属性的observableArray UserGroups不是Groups，因此我知道我不能直接将Groups属性绑定到复选框。

我试着为我的用户实体创建一个自定义的构造函数，以便我可以生成一个计算的只是组的代码，以供我使用。但是，当创建构造函数时，没有任何用户属性似乎存在，并且我的计算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>

来源

2014-02-06 JamesT

文档的“凉爽的微风”节这正好覆盖在"Presenting many-to-many"看看这种情况。

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

来源

2014-02-07 06:49:43 Ward

我已经写了我自己的解决方法来代替这个似乎相似的答案，但阅读它后，我更有效地重写它，所以欢呼，基本上是RTFM。 – JamesT

淘汰赛检查绑定和微风儿童收集

回答

相关问题