Take the 2-minute tour ×

I'm creating a collection of check-boxes like this at the moment.

Some context: At first i was using the ko.mapping plugin for the whole clientside VM exclusively.

eg in the context of my code:

self.AllAgencyTypes = ko.mapping.fromJS([]);

self.observables = {   //this would be created by the mapping plugin on render/runtime
    SomeProperty: ko.observable(),
    AgencyTypes: ko.observableArray()

My check-boxes rendered correctly except the appropriate one's would not be checked on screen load. I then became aware of an issue in knockout where i'd need to change my checked attribute to text. (see on success of my get ajax call)


<tbody data-bind="foreach: AllAgencyTypes">
    <label class="checkbox inline">
       <input  type="checkbox" class="editorField" data-bind="attr: { value: Id }, 
                           checked: $root.SelectedAgencies" />
       <span class="editorField" data-bind="text: Name"></span>


  AgencyDetailsVM: function (options) {

         var self = this;    

         self.AllAgencyTypes = ko.mapping.fromJS([]);

         //added this to get past the check-box bug
         self.SelectedAgencies = ko.observableArray([]); 

         // CRUD Actions
         self.get = function () {
                url: options.getURL,
                dataType: 'json',
                success: function (result) {

                    self.observables = ko.mapping.fromJS(result);    

                    //convert to string array
                        .Select(function (x) {
                          return x.Id.toString();

                    ko.applyBindings(self, $('form')[0]);

           $.getJSON(options.getAgencyTypes, function (response) {
                    ko.mapping.fromJS(response, self.AllAgencyTypes);

My current issue is on the save submit. Because my check-boxes are being bound to the newly created observable array, they're not being bound to my server side model.

         url: options.editURL,
         data: self.observables,
         type: "post",
         dataType: "json",    .... 

I've got an idea that if i was able to do something like this... it might solve my problems... but i don't know how. (getting a .string not allowed/something error ATM.)

                               checked: $root.observables.AgencyTypes.Id.toString()" />

Thus my only option i see available is to push the collection back into the original object created by ko.mapping... which i also don't know how to do at the moment... any ideas guys?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

The checked binding needs to either bind against a boolean or an array, so you can't bind against a string directly.

You could consider adding a boolean to each item and using a computed observable to represent the selected items.

Otherwise, you could use a manual subscription against your SelectedAgencies to keep the AgencyTypes in sync.

share|improve this answer
I like the subscription idea, i'll take a stab at it tomorrow and let you know of my findings... –  Rohan Büchner Nov 22 '12 at 20:45

You're looking for ko.toJSON, a static method that returns a JSON version of any object with observable members! Try this:

     url: options.editURL,
     data: ko.toJSON(self.observables),
     type: "post",
     dataType: "json",    .... 

If, for whatever reason, you need a "plain JS" rather than a serialized JSON string, you can use the antecedent function that ko.toJSON itself uses, ko.toJS:

var plainJSVM = ko.toJS(self.observables); // this produces a JS object containing the current, primitive values of all observables, ready to be serialized as JSON.
share|improve this answer

Your Answer


