Backbone.js突出显示页面上有大量数据

时间:2011-10-17 22:30:42

标签: javascript javascript-events backbone.js javascriptmvc backbone-relational

所以,我在应用程序中使用Backbone.js。我正在将网段与网址相关联。因此,段可以包含许多URL,并且给定的URL可以位于任何段中。有一个URL窗格和一个段窗格。问题是突出部分。因此,当我点击某个细分时,我想突出显示它所具有的网址。我将页面上显示的网址数限制为200.如果有超过200个网址,我们只向用户显示前200个,其余用户只需使用实时搜索找到他要查找的网址。问题是当网址少于200时,当我点击某个网段时,突出显示就会起作用。当有超过200个网址并且当用户点击某个细分时,突出显示不起作用。如果有超过200个网址,我在集合上使用切片,只需突出显示前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;
  }

1 个答案:

答案 0 :(得分:2)

您可能会收到一条JavaScript错误,导致代码无法运行,因为slice是数组的javascript方法。 Backbone集合不是数组,因此该方法不存在。

您可以通过调用urlCollection.toArray()

从集合中获取模型数组的副本