Javascript 获得'；未捕获错误：无法分析绑定'；错误，但代码可以工作

我正在尝试编写一个名为divider的自定义绑定

它只需将经过的ObservalArray对象拼接成更小的数组，并用模板包裹其元素。它正在工作，但我收到一个错误：

未捕获错误：无法分析绑定。 消息：ReferenceError:未定义列表； 绑定值：foreach:list

这里有什么问题？我看不见：）

HTML

<form data-bind="divider : { size : 4, list: controls , templateName : 'unit' }" class="form-horizontal"></form>

<script id="unit" type="text/x-jquery-tmpl">
    <div class="control-group">
      <div class="box" data-bind="template: { name : 'controlTemplate', foreach : $data }"></div> 
    </div>
</script>

<script id="controlTemplate" type="text/x-jquery-tmpl">
  <label data-bind="text:label" class="control-label" />
  <div class="controls">
    : <input data-bind="value:value" type="text" class="input-small"></input>
  </div>
</script>

<script id="dividerTemplate" type="text/x-jquery-tmpl">
    <div class="dividerContainer"  data-bind="foreach : list ">
      <div class="divider" data-bind="template : { name : $parent.name }"></div>               
    </div>
</script>

: 

JAVASCRIPT

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<=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 > 0 && options.templateName !== null) {

        var length = options.list().length;
        var size = options.size;
        var templateName = options.templateName;

        for(var i=0; i< (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);

});

函数l（日志）{
console.log（log）；
}
函数控件（标签、值）{
var self=这个；
this.label=ko.可观察（label）；
该值=可观察到的ko（值）；
}
函数ViewModel（）{
var self=这个；
this.controls=ko.observearray（）；
对于（var i=1；i 0&&options.templateName！==null）{
var length=options.list（）.length；
变量大小=options.size；
var templateName=options.templateName；
对于（变量i=0；i<（长度/大小）；i++）
separatedList（）.push（options.list.slice（i*size，（i+1）*size））；
l（ko.toJSON（单独列表））；
ko.applybindingstoode（$（元素）.get（0），
{模板：{name:'dividerTemplate'，数据：{list:separatedlist，name:templateName}}
);
}
}
};
$（文档）.ready（函数（）{
var viewModel=新的viewModel（）；
应用绑定（视图模型）；
});

---

您需要自定义绑定的init函数返回：

      return { controlsDescendantBindings: true };

这确保了主绑定循环不会尝试将绑定应用于由于您从绑定中手动调用模板绑定而呈现的新元素

---

一些额外信息：并且

您将希望自定义绑定的init函数返回：

      return { controlsDescendantBindings: true };

这确保了主绑定循环不会尝试将绑定应用于由于您从绑定中手动调用模板绑定而呈现的新元素

一些额外信息：和