Итак, я использую Backbone.js в приложении. Я связываю сегменты с URL. Таким образом, сегмент может содержать много URL, и данный URL может быть в любом сегменте. Существует панель URL и панель сегмента. Проблема в выделении. Поэтому, когда я нажимаю на сегмент, я хочу выделить его URL. Я ограничил количество отображаемых на странице URL-адресами до 200. Если существует более 200 URL-адресов, мы просто показываем пользователю первые 200, а для остальных пользователь просто использует живой поиск, чтобы найти URL-адрес, который он ищет. , Проблема в том, что когда есть менее 200 URL и когда я нажимаю на сегмент, подсветка работает. Когда существует более 200 URL-адресов и пользователь нажимает на сегмент, выделение не работает. Я использую срез в коллекции, если существует более 200 URL, просто выделите первые 200, но это не работает. Вот фрагмент кода. Есть ли у кого-нибудь хорошие предложения о том, как это исправить?
В SegmentView.js для функции toggleSelection:
toggleSelection: function() {
var max = 200;
//get the urls
var urls = this.App.segmentUrlCollection.urlsForSegment(this.model);
var pixels = this.App.segmentPixelCollection.pixelsForSegment(this.model);
if (this.selected) {
this.deselect();
this.selected = false;
this.$('.summary').removeClass('selected');
this.App.segmentCollection.each(function(segment){
if (segment.get('name') == "Unmapped"){
segment.view.$('.summary').addClass('unmapped');
}
});
//If there are more than 200 urls in url Collection just highlight the first 200.
if (this.App.urlCollection.size > 200) {
//problem?
this.App.urlCollection.slice(0,199).each(function(url) {
if (url.view.App.isUrlUnmapped(url)) {
url.view.$('.summary').addClass('unmapped');
}
});
}
else {
this.App.urlCollection.each(function(url) {
if (url.view.App.isUrlUnmapped(url)) {
url.view.$('.summary').addClass('unmapped');
}
});
}
//deselect the urls
_(urls).each(function(url) {
url.view.deselect();
});
_(pixels).each(function(pixel) {
pixel.view.deselect();
});
} else {
this.App.segmentCollection.each(function(segment) {
segment.view.selected = false;
segment.view.deselect();
});
this.App.segmentCollection.each(function(segment){
if (segment.view.$('.summary').hasClass('unmapped')){
segment.view.$('.summary').removeClass('unmapped');
}
});
//If there are more than 200 urls in url Collection just highlight the first 200.
if (this.App.urlCollection.size > 200) {
//problem?
this.App.urlCollection.slice(0,199).each(function(url) {
if (url.view.$('.summary').hasClass('unmapped')) {
url.view.$('.summary').removeClass('unmapped');
}
// url.view.deselect();
});
}
else {
this.App.urlCollection.each(function(url) {
if (url.view.$('.summary').hasClass('unmapped')) {
url.view.$('.summary').removeClass('unmapped');
}
// url.view.deselect();
});
}
//If there are more than 200 urls in url Collection just highlight the first 200.
if (this.App.urlCollection.size > 200) {
//problem?
this.App.urlCollection.slice(0,199).each(function(url) {
url.view.deselect();
});
}
else {
this.App.urlCollection.each(function(url) {
url.view.deselect();
});
}
this.App.pixelCollection.each(function(pixel) {
pixel.view.deselect();
});
this.select();
this.selected = true;
this.$('.summary').addClass('selected');
//select the urls
_(urls).each(function(url) {
url.view.select();
});
_(pixels).each(function(pixel) {
pixel.view.select();
});
}
return false;
}