淘汰賽檢查綁定和微風兒童收集

Question

我使用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> 

Answer 1

文檔的「涼爽的微風」節這正好覆蓋在"Presenting many-to-many"看看這種情況。

示例代碼適用於Angular應用程序。但指導（特別是在the plunker example's readme.md file將適用於Knockout應用程序