Uncaught ReferenceError: Unable to process binding "template: function (){return { foreach:third} }" Message: third is not defined in knockout js
Uncaught ReferenceError: Unable to process binding "template: function (){return { foreach:third} }" Message: third is not defined in knockout js
我还是 KnockoutJs 的新手，我在数据绑定方面遇到问题 table 绑定时会出现未捕获的引用错误..
我通过 ajax 调用调用数据并与另一个数组进行比较，并将比较值存储在一个变量中。这些变量应该绑定 table 中的值和显示值。在此绑定中，他们发现了一个错误，Uncaught ReferenceError: Unable to process binding "template: function (){return { foreach:third} }"
消息：第三个未定义..
我的示例代码是：
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}]
我在 table 中使用数据绑定绑定值：第三，它们不绑定第三个数组中的值。这个样本有什么问题。
<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>
如何绑定table中的第三个数组值..
您不是在构造函数中定义 self.third，而是在异步回调函数中定义。
当 knockout 应用其绑定时，您的视图模型上没有 third 属性，因为 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
我还是 KnockoutJs 的新手，我在数据绑定方面遇到问题 table 绑定时会出现未捕获的引用错误..
我通过 ajax 调用调用数据并与另一个数组进行比较，并将比较值存储在一个变量中。这些变量应该绑定 table 中的值和显示值。在此绑定中，他们发现了一个错误，Uncaught ReferenceError: Unable to process binding "template: function (){return { foreach:third} }" 消息：第三个未定义..
我的示例代码是：
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}]
我在 table 中使用数据绑定绑定值：第三，它们不绑定第三个数组中的值。这个样本有什么问题。
<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>
如何绑定table中的第三个数组值..
您不是在构造函数中定义 self.third，而是在异步回调函数中定义。
当 knockout 应用其绑定时，您的视图模型上没有 third 属性，因为 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