KnockoutJS mapping array of complex type object

Question

Is there a way to do it more "automatically" ?

JavaScript code

var _json = {
  Parents : [
      { ID: 1, Option: { ID: 0, Name: "Zero" } },
      { ID: 2, Option: { ID: 0, Name: "Zero" } }
  ],         
  Options : [
    { ID: 0, Name: "Zero" },
    { ID: 1, Name: "One" },
  ]
};

var mapping = {
      'Parents': {
          create: function(options){
              options.data.Option = ko.observable(options.data.Option);
              return options.data;
          }
      }
  };

var viewModel = ko.mapping.fromJS(_json, mapping);
ko.applyBindings(viewModel);

HTML markup

<div data-bind="foreach: Parents">
  <p>
    <b data-bind="text: $data.ID"></b>
    <select name="x" data-bind="options: $parent.Options, optionsText: 'Name', value:   $data.Option"></select>
    <span data-bind="text: ko.toJSON($data)"></span>
  </p>
</div>

Here is a sample jsfiddle http://jsfiddle.net/BvVce/11/

Tomas Kirda · Accepted Answer · 2013-05-03 20:38:16Z

I have wrote simple recursive mapping function. Is that what you are looking for:

var _json = {
  Parents : [
      { ID: 1, Option: { ID: 0, Name: "Zero" } },
      { ID: 2, Option: { ID: 0, Name: "Zero" } }
  ],         
  Options : [
    { ID: 0, Name: "Zero" },
    { ID: 1, Name: "One" },
  ]
};

function convertToObservable(obj) {
    var newObj = {},
        key,
        value;

    if (!$.isPlainObject(obj)) {
        return obj;
    }

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            value = obj[key];
            // console.log(key + ':', value);
            newObj[key] = $.isArray(value) 
                ? ko.observableArray($.map(value, convertToObservable)) 
                : $.isPlainObject(value) 
                        ? ko.observable(convertToObservable(value)) 
                        : ko.observable(value);
        }
    }
    return newObj;
}

var viewModel = convertToObservable(_json);
ko.applyBindings(viewModel);

Check it out on fiddler: http://jsfiddle.net/tkirda/BvVce/12/

Collectives™ on Stack Overflow

KnockoutJS mapping array of complex type object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related