0

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

1 回答 1

2

您可能会遇到阻止代码运行的 JavaScript 错误，因为slice它是数组的 javascript 方法。骨干集合不是数组，所以这个方法不存在。

您可以通过调用从集合中获取模型数组的副本urlCollection.toArray()

于 2011-10-18T04:08:00.730 回答