knockout sudoku

by Annemarie Köhler

HTML

<div id="container">
  <div data-bind="foreach: grid">
    <div data-bind="foreach: $data">
      <input type="text" data-bind="value: val, disable: disabled" />
    </div>
  </div>
  <input type="button" data-bind="click: submit" value="Submit" />
</div>
<!-- 
function() {
	var grid = [], row = 0, len = 9;
  var populateRow = function(rownum) {
    var newrow = [];
    var col = 0;
    for(;col < len; col++) {
    	newrow.push(col < 5 ? undefined : 5);
    }
    return newrow;
  };  
  for(;row < len; row++) {  	
    grid.push(populateRow(row));  	
  }
  return grid;
} -->

CSS

input[type=text] {
  width: 25px;
  height: 25px;
  text-align: center;
}

JavaScript

var viewModel = function(inputgrid) {
	var grid = [], row = 0, len = 9;
  var populateRow = function(rownum) {
    var newrow = [];
    var col = 0;
    for(;col < len; col++) {
    	newrow.push({
      	val: ko.observable(inputgrid[rownum][col]),
        disabled: !(inputgrid[rownum][col])
      });
    }
    return newrow;
  };  
  for(;row < len; row++) {  	
    grid.push(populateRow(row));  	
  }

	return {
  	grid: grid,
    submit: function(args) {
    	console.log(args);
    }
  };
};
var inputgrid =  function() {
	return [[undefined,6,undefined, undefined,undefined, undefined,1,undefined]
          [undefined,undefined,undefined,6,5,1,undefined,undefined,undefined],
          [1,undefined,7,undefined,undefined,undefined,6,undefined,2],

          [6,2,undefined,3,undefined,5,undefined,9,4],
          [undefined,undefined,3,undefined,undefined,undefined,2,undefined,undefined],
          [4,8,undefined,9,undefined,7,undefined,3,6],

          [9,undefined,6,undefined,undefined,undefined,4,undefined,8],
          [undefined,undefined,undefined,7,9,4,undefined,undefined,undefined],
          [undefined,5,undefined,undefined,undefined,undefined,undefined,7,undefined]];
  	}


var thisvm = viewModel(inputgrid());
ko.applyBindings(thisvm, document.getElementById('container'));