Facing knockout.js binding error in chrome browser

问题:

I am novice to Knockout.js. It is a new module in our project completely written using knockout.js and Template tool kit, which was developed by 3rd party team which is no more in the picture.

On page load of a particular page, I am experiencing binding error in chrome where as it works perfectly fine in FF.

The following is the HTML snippet which is problematic in chrome. I have copied the source from FF firebug and pasting it here.

<div class="well well-xs">
  <div class="field clearfix">
    <div data-bind="template: { name: 'field-' + type(), data: $data, as: 'field' }">
    <div class="form-group editable_field">
    <div class="row">
        <div class="col-md-12">
            <label data-bind="text: label" class="text-primary">Full Program Curriculum Map</label>
            <p data-bind="text: description" class="help-block">Optional upload</p>
        </div>
    </div>
</div>
<div data-bind="component: {name: 'file-uploader', params: {
    files: files,
    uniqueId: id,
    clearTempFile: ko.observable(false)
}}">
<div class="upload">
  <form data-bind=" attr: { 'id': 'form_' + uniqueId, 'target': iframeName, action : '/misk5/c1/upload_file?ticket=' + files.last().ticket }" enctype="multipart/form-data" method="post" id="form_11305" target="iframe_11305undefined" action="/misk5/c1/upload_file?ticket=undefined">
            <div class="btn btn-primary btn-file pull-left">
                <i class="pull-left icon-upload"></i>
                <span class="pull-left">Select File</span>
                <!-- ko if: !ko.unwrap(resetFile) -->
                <input type="file" data-bind="value: tempFile, attr: { 'id': 'file_input' + uniqueId }" name="file" id="file_input11305">
                <!-- /ko -->
            </div>
        </form>
        <p class="form-control-static">Maximum allowed file size is 1GB.</p>
        <div data-bind="if: extendSize" class="has-error"></div>
    </div>
    <div data-bind="if: typeof ko.unwrap(files) == 'object' &amp;&amp; ko.unwrap(files).length &gt; 0" class="col-md-12"></div>
</div>
</div>
</div>
</div>

The same HTML snippet as displayed in Chrome.

<div class="col-md-12">
  <ul class="list-unstyled" data-bind="foreach: files">
    <li class="clearfix">
      <div class="pull-left">
        <a target="_blank" data-bind="text: name, attr: { href: '/misk5/c1/download_file/' + ko.unwrap(name) + '?file_id=' + ko.unwrap(id)}"></a>
        (<span data-bind="text: formattingSize"></span>)
      </div>
    </li>
  </ul>
</div>

Here is the Knockout.js code block which is generating this HTML code.

<div class="well field-container">
  <!-- ko if: ko.unwrap(submissionStatus) !== 'approved' -->
  <!-- ko foreach: fields -->
  <div class="well well-xs">
    <div class="field clearfix">
      <div data-bind="template: { name: 'field-' + type(), data: $data, as: 'field' }"></div>
    </div>
  </div>
  <!-- /ko -->
  <!-- /ko -->
  <!-- ko if: ko.unwrap(submissionStatus) === 'approved' -->
  <!-- ko foreach: fields -->
  <div class="well well-xs">
    <div class="field clearfix">
      <div data-bind="template: { name: 'field-readonly-' + type(), data: $data,  as: 'field'}"></div>
    </div>
  </div>
  <!-- /ko -->
  <!-- /ko -->
</div>

I tried debugging using the instructions mentioned in this Web page. But nothing mentioned here was of much help in my case.

Here is the error which I am observing in the Chrome Browser.

knockout-min.js: Uncaught ReferenceError: Unable to process binding "if: function (){return ko.unwrap(submissionStatus) !=='approved' }"
Message: Unable to process binding "foreach: function (){return fields }"
Message: Unable to process binding "template: function (){return { name:'field-'+ type(),data:$data,as:'field'} }"
Message: Unable to process binding "text: function (){return content }"
Message: content is not defined
    at text (eval at parseBindingsString (knockout-min.js:61), <anonymous>:3:64)
    at update (knockout-min.js:91)
    at function.a.j.q (knockout-min.js:66)
    at l (knockout-min.js:44)
    at Object.a.w.a.j (knockout-min.js:47)
    at knockout-min.js:66
    at Object.o (knockout-min.js:10)
    at g (knockout-min.js:65)
    at h (knockout-min.js:63)
    at k (knockout-min.js:63)
    at h (knockout-min.js:63)

Can any one suggest me on how to debug this code?