Блог

Я использую Backbone.js в приложении. Я связываю сегменты с URL-адресами. Таким образом, сегмент может содержать много URL-адресов, и данный URL-адрес может находиться в любом сегменте. Есть панель url и панель сегментов. Проблема заключается в части выделения. Итак, когда я нажимаю на сегмент, я хочу выделить URL-адреса, которые у него есть. Я ограничил количество URL-адресов, отображаемых на странице, до 200. Если URL-адресов более 200, мы просто показываем пользователю первые 200, а для остальных пользователь просто использует поиск в реальном времени, чтобы найти нужный URL. Проблема в том, что когда URL-адресов менее 200, и когда я нажимаю на сегмент, подсветка работает. При наличии более 200 URL-адресов и когда пользователь нажимает на сегмент, выделение не работает. Я использую slice для коллекции, если имеется более 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;
  }
  

Вероятно, вы получаете ошибку JavaScript, которая препятствует запуску вашего кода, потому slice что это метод javascript для массивов. Коллекции Backbone не являются массивами, поэтому этот метод не существует.

вы можете получить копию массива моделей из коллекции, вызвав urlCollection.toArray()