BASE

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/3/ko.datepicker.js"></script>

CSS

input {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
}

JavaScript

var Model = function()
{
	this.ID = ko.observable();
  this.Name = ko.observable();
	this.Prices = ko.observableArray();
};

var model = new Model();

ko.mapping.fromJS({
	ID: 1,
  Name: 'One',
  Prices: [
  	{
    	ID: 2,
      Name: 'Two',
      Prices: [
      	{
        	ID: 3,
          Name: 'Three',
          Prices: []
        }
      ]
    }
  ]
}, {}, model);

Object.find = function(root, pred, childrenselector)
{
	var f = function(o)
        {        
            if (pred(o))
                return o;
            else 
            {
            	var children = childrenselector(o);
              for (var i = 0; i < (!!children ? children.length : 0); i++)
              {
                  var res = f(children[i]);

                  if (res)
                      return res;
              }
            }

            return null;
        };
        
        return f(root);
};

console.log('SETUP', ko.toJS(model));
console.log('RESULT', ko.toJS(Object.find(
	model,
  function(x) { return x.ID() == 3; },
  function(x) { return x.Prices(); }
)));