CODEWITHSUNDEEP
knockout.jsknockout-2.0
Vinblad
Vinblad

Reputation: 686

How to bind child collections to different checkbox list in knockout

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.

Upvotes: 0

Views: 518

Answers (2)

Chad Campbell
Chad Campbell

Reputation: 129

I've posted a very basic example of how to create a checkbox list with knockout. My example does not have the ability to dynamically add roles like you have mentioned. However, you should be able to do that with an observableArray.

Upvotes: 0

Anders
Anders

Reputation: 17554

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

Upvotes: 1

Related Questions