CODEWITHSUNDEEP
knockout.js
Rahul
Rahul

Reputation: 5774

KnockoutJS checkbox, build string based on checked items

I am working on a checkbox list which basically has group of clusters.. Structure is given below

Cluster 1 :

  1. Cluster1 Subitem 1 [x]
  2. Cluster1 subitem 2 [x]
  3. Cluster1 subitem 3 [x]

Cluster 2 :

  1. Cluster2 Subitem 1 [x]
  2. Cluster2 subitem 2 [x]
  3. Cluster2 subitem 3 [x]

Cluster 3 :

  1. Cluster3 Subitem 1 [x]
  2. Cluster3 subitem 2 [x]
  3. Cluster3 subitem 3 [x]

I want to build query like, selected items in same cluster will be joined by OR and selected items from different clusters will be joined by AND..

e.g. (Cluster1 Subitem 1 OR cluster1 subitem 2) AND (Cluster2 Subitem 3) AND (Cluster3 Subitem 1 OR cluster3 subitem 3)

In above example, selected items are subitem 1 and 2 in cluster1, subitem 3 in cluster 2 and subitem 1 and 3 in cluster3...

I have managed to achieved it with hardcoded values in this fiddle : http://jsfiddle.net/rahulrulez/8YfmW/3/

Code snippet - 

        switch (parent.Id()) {
        case "IsIssue":
            if (self.IsIssue.indexOf(item.Value()) == -1 && item.isChecked(false)) self.IsIssue.push(item.Value());
            else self.IsIssue.remove(item.Value());
            break;
        case "Owner":

            if (self.Owner.indexOf(item.Value()) == -1 && item.isChecked(false)) self.Owner.push(item.Value());
            else self.Owner.remove(item.Value());
            break;
        case "Project":
            if (self.Project.indexOf(item.Value()) == -1 && item.isChecked(false)) self.Project.push(item.Value());
            else self.Project.remove(item.Value());
            break;
    }

Is there any way to optimize it if we are not sure about number if clusters we are getting from server as a response?

Thanks in advance, Rahul

Upvotes: 0

Views: 69

Answers (1)

Romain B.
Romain B.

Reputation: 266

you can just bind your checkbox on isChecked observable :

<input type="checkbox" data-bind="attr : { value : Name}, checked: isChecked">

then create your query in your computed, here's a fiddler example : http://jsfiddle.net/RapTorS/PRV42/

Upvotes: 1

Related Questions