title: Getting 'Uncaught Error: Unable to parse bindings' error but code works
body: <p>I am trying to write a custom binding called divider.</p>
  
  <p>Its simply splice the passing observableArray object into smaller arrays and wrap its elements with a template. It is working but i am getting an error : </p>
  
  <p><strong>Uncaught Error: Unable to parse bindings.
  Message: ReferenceError: list is not defined;
  Bindings value: foreach : list</strong>  </p>
  
  <p>What is the problem here ? I can't see :)</p>
  
  <p><strong>HTML</strong></p>
  
  
  
  <pre><code>&lt;form data-bind="divider : { size : 4, list: controls , templateName : 'unit' }" class="form-horizontal"&gt;&lt;/form&gt;
  
  &lt;script id="unit" type="text/x-jquery-tmpl"&gt;
      &lt;div class="control-group"&gt;
        &lt;div class="box" data-bind="template: { name : 'controlTemplate', foreach : $data }"&gt;&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="controlTemplate" type="text/x-jquery-tmpl"&gt;
    &lt;label data-bind="text:label" class="control-label" /&gt;
    &lt;div class="controls"&gt;
      : &lt;input data-bind="value:value" type="text" class="input-small"&gt;&lt;/input&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script id="dividerTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;div class="dividerContainer"  data-bind="foreach : list "&gt;
        &lt;div class="divider" data-bind="template : { name : $parent.name }"&gt;&lt;/div&gt;               
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>function l(log) {
   console.log(log); 
  }
  
  function Control(label,value) { 
    var self = this;  
    this.label = ko.observable(label);
    this.value = ko.observable(value);
  }
  
  function ViewModel() {
  
    var self = this;  
  
    this.controls = ko.observableArray();  
  
    for(var i=1;i&lt;=10;i++) {
      this.controls.push(new Control('TEST'+i,'VALUE'+i));
    }  
  }  
  
  ko.bindingHandlers.divider = {
  
      init: function (element, valueAccessor, allBindingsAccessor, data, context) {
  
        var defaultOptions = { size : 5 };
        var options = $.extend(true, defaultOptions, valueAccessor()); 
  
        var seperatedList = ko.observable([]);
  
        if( options.list().length &gt; 0 &amp;&amp; options.templateName !== null) {
  
          var length = options.list().length;
          var size = options.size;
          var templateName = options.templateName;
  
          for(var i=0; i&lt; (length/size); i++)          
                  seperatedList().push(options.list.slice(i*size, (i+1)*size) );
  
          l(ko.toJSON(seperatedList));
  
          ko.applyBindingsToNode(  $(element).get(0),
                                   {template: { name: 'dividerTemplate' , data : { list: seperatedList , name : templateName}} }
                                );
          }
  
      }
  };
  
  $(document).ready(function(){
  
    var viewModel = new ViewModel();  
    ko.applyBindings(viewModel);
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gurkavcu/P38rd/" rel="nofollow">JSFIDDLE</a></p>