Question

我是Knockout.js的新手。这是我们项目中的一个新模块，完全使用knockout.js和Template工具包编写，该工具包由第三方团队开发，不再是图片。

在特定页面的页面加载中，我遇到了chrome中的绑定错误，因为它在FF中完美运行。

以下是在Chrome中存在问题的HTML代码段。我已经从FF firebug中复制了源代码并将其粘贴在这里。

<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>

与Chrome中显示的HTML代码段相同。

<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>

这是生成此HTML代码的Knockout.js代码块。

<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>

我尝试使用此Web page中提到的说明进行调试。但在我的案例中没有提到任何帮助。

以下是我在Chrome浏览器中观察到的错误。

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)

有人可以建议我如何调试此代码吗？

在chrome浏览器中遇到knockout.js绑定错误

0 个答案: