Chrome浏览器在这种情况下出错了，而FireFox不会

时间：2017-01-25 16:05:07

标签： google-chrome knockout.js

我被要求在我的项目中的新模块中查看一个问题，该模块完全写在Knockout.js上。我不是原始编码器，因此我几乎没有信息可以与您分享。

这是给我错误的代码。

    self.loadSections = function (sections, submissions, isReviewer) {
        self.sections([]);
        _.each(sections, function(section) {
            var submissionsCopy = {
                sections: [],
                fields: []
            };
            var newSection;
            if (submissions) {
                var submissionsCopy = _.clone(submissions);
                self.cachedSubmissions = submissionsCopy;
            }
            // logically speaking submissionsCopy.sections[section.id] is empty for three instances as the submissions array do not have the corresponding hash values but why does the script error appears only in chrome?
            newSection = new Section(section, submissionsCopy.sections[section.id], isReviewer);
            newSection.template = self;
            newSection.fill(submissionsCopy.fields);
            self.sections.push(newSection);
        });
    };

其中section数据结构是对象数组。在我的测试用例中，它是一个包含6个对象的数组。每个对象都有很多字段，但在这个例程中最重要的是id，它是一个数字。

0:Object
 >Fields
 >id = "1234"
 .. 
 .. 
1:Object
 >Fields
 >id = "2345"
 .. 
 .. 
2:Object
 >Fields
 >id = "3456"
 .. 
 .. 
3:Object
 >Fields
 >id = "4567"
 .. 
 .. 
4:Object
 >Fields
 >id = "5678"
 .. 
 .. 
5:Object
 >Fields
 >id = "6789"
 .. 
 ..

提交数据结构如下所示。

Object
> fields
> sections:object
  >1234:object
  >2345:object
  >3456:object

isReviewer只是一个布尔值。

以下是HTML代码段。我们使用模板工具包来创建HTML页面。

＆＃13;
＆＃13; 
<main data-bind="with: template">
    <div class="col-md-12 hide" data-bind="css: {show: ko.unwrap(sections).length > 0}">
        <section class="ams-section border-divide">
            <ul class="nav nav-tabs">
                <!-- ko foreach: displaySections -->
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a class="step" href="#" data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }">
                        <span class="circle circle-md circle-solid" data-bind="text: $index()+1"></span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span class="step-name pull-right" data-bind="text: name, attr: {title: name}"></span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id -->
                        <span class="step-name pull-right" data-bind='attr: {title: ko.unwrap($data.name) + " " + "[% source_template.name | escape_html %]"}'>
                            <!-- ko text: name--><!-- /ko -->&nbsp;[% source_template.name | escape_html %]
                        </span>
                        <!-- /ko -->
                    </a>
                </li>
                <!-- /ko -->
            </ul>
＆＃13;
＆＃13;
＆＃13;

上面的代码正在呈现HTML。下面我附上了出现在FireFox浏览器中的HTML代码。

＆＃13;
＆＃13; 
<ul class="nav nav-tabs">
                <!-- ko foreach: displaySections -->
                <li data-bind="css: {'active': $parent.activeSectionId() == id}" class="active">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">1</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Introduction">Introduction</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">2</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Program Mission, Objectives, and Learning Outcomes">Program Mission, Objectives, and Learning Outcomes</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">3</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Curriculum Map">Curriculum Map</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">4</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Assessment Plan">Assessment Plan</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">5</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Summary of Assessment Activities">Summary of Assessment Activities</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                
                <li data-bind="css: {'active': $parent.activeSectionId() == id}">
                    <a data-bind="click: function() { $parent.activeSectionId(id); autosize.update(jQuery('.textarea-autoheightjs')); }" href="#" class="step">
                        <span data-bind="text: $index()+1" class="circle circle-md circle-solid">6</span>
                        <!-- ko if: ko.unwrap($data.template.id) == $parent.id -->
                        <span data-bind="text: name, attr: {title: name}" class="step-name pull-right" title="Improvements Resulting from Assessment">Improvements Resulting from Assessment</span>
                        <!-- /ko -->

                        <!-- ko if: ko.unwrap($data.template.id) != $parent.id --><!-- /ko -->
                    </a>
                </li>
                <!-- /ko -->
            </ul>
＆＃13;
＆＃13;
＆＃13;

现在当我到达点击此功能的页面时，该页面会为ID显示多个标签。在FF中，它工作正常，但在Chrome（版本55.0.2883.87 m）中，我只能看到三个选项卡，其ID在提交数据结构中。在第四次迭代中，我收到脚本错误。

＆＃13;
＆＃13; 
knockout-min.js:66 Uncaught ReferenceError: 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)
text	@	VM3767:3
update	@	knockout-min.js:91
function.a.j.q	@	knockout-min.js:66
l	@	knockout-min.js:44
a.w.a.j	@	knockout-min.js:47
(anonymous)	@	knockout-min.js:66
o	@	knockout-min.js:10
g	@	knockout-min.js:65
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
a.ub	@	knockout-min.js:69
(anonymous)	@	knockout-min.js:103
b	@	knockout-min.js:102
d	@	knockout-min.js:103
e	@	knockout-min.js:104
(anonymous)	@	knockout-min.js:105
l	@	knockout-min.js:44
a.w.a.j	@	knockout-min.js:47
a.eb	@	knockout-min.js:105
update	@	knockout-min.js:107
function.a.j.q	@	knockout-min.js:66
l	@	knockout-min.js:44
a.w.a.j	@	knockout-min.js:47
(anonymous)	@	knockout-min.js:66
o	@	knockout-min.js:10
g	@	knockout-min.js:65
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
a.ub	@	knockout-min.js:69
(anonymous)	@	knockout-min.js:103
b	@	knockout-min.js:102
d	@	knockout-min.js:103
n	@	knockout-min.js:105
a.a.fb	@	knockout-min.js:112
u	@	knockout-min.js:35
a.j.q	@	knockout-min.js:106
l	@	knockout-min.js:44
a.w.a.j	@	knockout-min.js:47
a.Cc	@	knockout-min.js:106
update	@	knockout-min.js:107
update	@	knockout-min.js:84
function.a.j.q	@	knockout-min.js:66
l	@	knockout-min.js:44
a.w.a.j	@	knockout-min.js:47
(anonymous)	@	knockout-min.js:66
o	@	knockout-min.js:10
g	@	knockout-min.js:65
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
k	@	knockout-min.js:63
h	@	knockout-min.js:63
a.ub	@	knockout-min.js:69
(anonymous)	@	knockout-min.js:103
b	@	knockout-min.js:102
d	@	knockout-min.js:103
n	@	knockout-min.js:105
a.a.fb	@	knockout-min.js:112
u	@	knockout-min.js:35
a.j.q	@	knockout-min.js:106
l	@	knockout-min.js:44
h	@	knockout-min.js:43
notifySubscribers	@	knockout-min.js:33
d.W	@	knockout-min.js:36
a.ba.fn.(anonymous function)	@	knockout-min.js:40
(anonymous)	@	Template.js?1484122788:349
m.each.m.forEach	@	underscore.min.js?1484122788:5
self.loadSections	@	Template.js?1484122788:336
(anonymous)	@	ProgramPlanPage.js?1484122788:83
j	@	jquery-1.11.1.min.js:2
fireWith	@	jquery-1.11.1.min.js:2
x	@	jquery-1.11.1.min.js:4
b	@	jquery-1.11.1.min.js:4
＆＃13;
＆＃13;
＆＃13;

我尝试在最内层代码的最后4行之前添加if条件，但这会影响FF中的功能。

0 个答案:

没有答案
相关问题
最新问题