Question

Im having a problem I have no idea how to solve.

I have this page that contains a project. Each project has members and each member can have one or more roles. I would like to show some sort of “picklist” where all assigned roles are “checked” and its possible to add or remove roles from each member while having the model updated reflecting these changes.

I’ve created a simple http://jsfiddle.net/vinblad/PhQRr/1/ to demonstrate what Im getting at but as I said, I don’t have a clue as how to solve this so any help would be great!

Here’s the viewmodel code:

var viewModel = new function() {
   var self = this;
   self.project = ko.observable();
   self.roles = ko.observable();
};

viewModel.load = function() {
   var data = {"project":{"members":[{"member":{"name":"Vinblad
   Anders","id":13,"isDeleted":false},"roles":[{"name":"Editor","id":1,
   "isDeleted":false},{"name":"Admin","id":2,"isDeleted":false}],"id":1},{"member":
   {"name":"Gramer Mikael","id":14,"isDeleted":false},"roles": 
   [{"name":"Reader","id":1,"isDeleted":false}],"id":2}],"name":"Project 
   XYZ","number":338,"id":1},"roles":[{"name":"Admin","id":1,"isDeleted":false},  {
   "name":"Editor","id":2,"isDeleted":false}, {
   "name":"Reader","id":3,"isDeleted":false}]}
   viewModel.loadView(data);
};
viewModel.loadView = function(data) {
    viewModel.project(data.project);
    viewModel.roles(data.roles);
    ko.applyBindings(viewModel);    
};

viewModel.load();

In this sample the data is hardcoded, in reality the data comes from a webservice and I use the knockoutjs.mapping plug-in.

Answer 1

I dont see the problem, its not even recursive as you states, If a child of project had a project as member then it would be recursive.

Create 4 ViewModels a EditProjectMembersViewModel which has a array of ProjectViewModel which has a array of MemberViewModel which has a array of RoleViewModel

Or just use autogenerated Viewmodels from the mapping plugin
http://jsfiddle.net/Ed8Fv/

ko.applyBindings(ko.mapping.fromJS(data));