KnockoutJS отображает массив объекта сложного типа

Есть ли способ сделать это более «автоматически»?

Код JavaScript

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

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

Вот пример jsfiddle http://jsfiddle.net/BvVce/11/.


json knockout.js knockout-mapping-plugin
person Tocco    schedule 03.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я написал простую функцию рекурсивного отображения. Это то, что вы ищете:

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

Проверьте это на скрипаче: http://jsfiddle.net/tkirda/BvVce/12/

person Tomas Kirda    schedule 03.05.2013