未捕获引用错误：无法处理绑定“template:function（）{return{foreach:third}}”消息：敲除js中未定义third

Question

我对KnockoutJs还是新手，我在数据绑定方面遇到了问题。表在绑定时会出现未捕获的引用错误。。

我通过ajax调用调用数据，并与另一个数组进行比较，并将比较值存储在一个变量中。这些变量应该绑定表中的值和显示值。在这个绑定中，他们捕获了一个错误，未捕获的引用错误：无法处理绑定"模板：函数（）{返回{Foreach：第三}}"消息：第三没有定义...

我的示例代码是：

window.onload=function(){   
//setInterval(function() {
jQuery(function($){
    var ListSortModel = function () {
            var self = this;
            self.first = ko.observableArray([
                { "id": 101, "rank": 5},
                { "id": 103, "rank": 1},
                { "id": 102, "rank": 6},
                { "id": 106, "rank": 4}, 
                { "id": 104, "rank": 3},                    
                { "id": 105, "rank": 2}
            ]);

            self.second = ko.observableArray();
            //setInterval(function() {
            function myAjaxCheck(callback) {    
                $.getJSON("sample.php", function(data) {
                    console.log("ajax called");
                    self.second = JSON.stringify(data);
                    //console.log(self.second);

                    callback(data);


                }); 
            }
            //}, 3000); 

        var myVariable; 
        myAjaxCheck(function(returnedData){ //anonymous callback function
            myVariable = returnedData;
            //console.log(myVariable);
            //console.log(myVariable.length);

            //alert("outside ajax call");
            var a = self.first();
            console.log("First array "+JSON.stringify(a));
            ///var b = self.second();
            var b = myVariable;
            console.log("second array "+ JSON.stringify(b));
            console.log("1st array : "+a.length+ " 2nd array : " + b.length);

        //if(a.length == 0 && b.length == 0) {  
            var totallen = 0;
            if(a.length >= b.length){
                totallen = a.length;
            }else{
                totallen = b.length;
            }
            for(var i=0;i<a.length;i++)
                for(var k=0;k<b.length;k++)
                    if(a[i].id == b[k].id) {
                        if(a[i].rank > b[k].rank){
                            b[k].img = 0;
                        }else if(a[i].rank < b[k].rank){
                            b[k].img = 1;
                        }else if(a[i].rank == b[k].rank){
                            b[k].img = 2;
                        }
                        a.splice(i,1);
                        i--;
                        break;
                    }
            a = a.concat(b);
            console.log("Third array: " + JSON.stringify(a));

        //}

            for(i=0;i<totallen;i++){
                if(a[i].img == undefined){
                    if(a[i].rank < totallen){
                        a[i].img =0;
                    }else if(a[i].rank > totallen){
                        a[i].img = 1;
                    }else if(a[i].rank == totallen){
                        a[i].img = 2;
                    }
                }
            }

            a.sort(function(obj1,obj2) {
                return obj1.id > obj2.id;
            });     

            /* compared array values stored in third array */
            self.third = ko.observableArray(a);   // Error in binding value

            temp = 1;
            self.addImg = function(index) {       
                if(self.third()[index].img == 0){
                    return 'upImg';
                }else if(self.third()[index].img == 1){
                    return 'downImg';
                }
                else if(self.third()[index].img == 2){
                    return;
                }                       
            };      




            self.moveUp = function(item, cnt) {
                var prev = item.prev();
                if (prev.length == 0)
                    return;
                prev.css('z-index', 999).css('position','relative').animate({ top: item.height() * cnt }, 250);
                item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() * cnt }, 300, function () {
                    prev.css('z-index', '').css('top', '').css('position', '');
                    item.css('z-index', '').css('top', '').css('position', '');
                    for (;cnt>1;cnt--)
                        prev=prev.prev();
                    item.insertBefore(prev);
                });
            }

            self.moveDown = function(item, cnt) {
                    var next = item.next();
                    if (next.length == 0)
                        return;
                    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() * cnt }, 250);
                    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() * cnt }, 300, function () {
                        next.css('z-index', '').css('top', '').css('position', '');
                        item.css('z-index', '').css('top', '').css('position', '');
                        for (;cnt>1;cnt--)
                            next=next.next();
                        item.insertAfter(next);
                    });
            }

            /* sorting based on rank after display third array*/
            self.SortbyRank = function() {
                setTimeout(function(){
                    console.log("testData");
                    self.third().sort(function(obj1,obj2) {
                        return obj1.rank > obj2.rank;
                    });

                    //Animate after sorting as Sorting is multi fold and fast
                    self.third().forEach(element => {
                        //console.log("Array element is " + element.id + " rank " + element.rank + " Index is " + $("#id_"+element.id).index());
                        if (element.rank > ($("#id_"+element.id).index()+1)){
                            //setTimeout(function(){
                                self.moveDown($("#id_"+element.id), (element.rank - ($("#id_"+element.id).index()+1)));
                            //},1000);
                        } else if (element.rank < ($("#id_"+element.id).index()+1)){
                            //setTimeout(function(){
                                self.moveUp($("#id_"+element.id), (($("#id_"+element.id).index()+1) - element.rank));
                            //},1000);
                        }
                    });
                },1000);
            }           

            window.setInterval(function() { 
                self.SortbyRank(); 
            }, 5000);

            /* window.setInterval(function() { 
                self.third.valueHasMutated(); 
            }, 6000); */

        });
    };
    ko.applyBindings(new ListSortModel());
});     

//}, 5000);

}这是我的脚本数据，我的示例json数据是，

[
{ "id": 101, "rank": 5},
{ "id": 102, "rank": 6},                    
{ "id": 106, "rank": 1},
{ "id": 103, "rank": 4},
{ "id": 104, "rank": 2},
{ "id": 105, "rank": 3}]

我在带有数据绑定的表中有绑定值：第三，它们不绑定第三个数组中的值。此示例中的问题是什么。

<div class="container-fluid tablebody" data-bind="template: { foreach: third }">
        <div class="row tablerow" data-bind="attr: {id: 'id_' + id }">
            <div class="col-sm-1 cell" data-bind='text: id'></div>
            <div class="col-sm-1 cell"  data-bind='text: rank, css: $parent.addImg($index())'></div>
            <!-- <div class="col-sm-1 cell" width="10%" id="testData" data-bind="css: $parent.addImg($index())"></div> -->
        </div>
    </div>

如何绑定表中的第三个数组值。。

Answer 1

您定义的self.third不是在构造函数中，而是在异步回调函数中。

当Knockout应用它的绑定时，在你的view模型上没有第三个属性，因为ajax调用还没有完成。

解决方案是在构造函数中定义可观察属性，并在回调中设置其值。

首先定义：

// ...
self.second = ko.observableArray();
self.third = ko.observableArray(); // <-- define here, right after second
// ...

稍后设置：

/* compared array values stored in third array */
self.third(a); // <-- set here, by calling it