通过单击非模板元素对集合进行主干排序

由于您可以访问视图之外的集合，因此您只需使用 jquery 绑定 <li> 的事件处理程序，该处理程序将更新集合比较器并对其进行排序。然后，当集合上发生排序事件时，让视图重新呈现自身。

对于演示，我使用排序属性的字符串和数字类型，以便我可以直接将其设置为比较器。您应该编写一个自定义比较器函数，该函数根据不同类型的参数（如字符串、数字、日期等）处理排序。更新的小提琴

//backbone & underscore
$(function() {
  var Videos = Backbone.Model.extend();
  var VideoList = Backbone.Collection.extend({
    model: Videos,
    url: 'https://api.myjson.com/bins/4mht3'
  });
  var videos = new VideoList();
  var VideoListView = Backbone.View.extend({
    el: "#thumbnail_target",
    template: _.template($('#videos-thumbnail').html()),
    initialize: function() {
      this.listenTo(this.collection, 'sort', this.render);
    },
    render: function(eventName) {
      this.$el.empty();
      _.each(this.collection.models, function(video) {
        var videoTemplate = this.template(video.toJSON());
        this.$el.append(videoTemplate);
      }, this);
      return this;
    },
  });
  var videosView = new VideoListView({
    collection: videos
  });
  videos.fetch({
    success: function(collection) {
      videosView.render();
    }
  });
  $('#sortBy').on('click', 'li', function() {
    var category = $(this).text().split('Sort By ')[1];
    videos.comparator = category;
    videos.sort();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<ul id="sortBy">
  <li>Sort By average</li>
  <li>Sort By title</li>
</ul>
<script type="foo/bar" id='videos-thumbnail'>
  <div class="col-md-4">
    <div class="video-thumbnail-item">
      <div style="background-image:url(recenty_added/recentlyadded2.jpg);" class="video-thumbnail"></div>
      <div class="video-details">
        <div class="video-title text-purple uppercase">
          <%=t itle %>
        </div>
        <div class="video-date">
          <%=d ate %>
        </div>
      </div>
      <div class="video-thumbnail-checkbox"> <span class="custom-checkbox">
          <input type="checkbox" class="playlist-checkbox" name="addto-playlist[]">
          </span>
        <% if (is_rights_managed==t rue) { %>
          <div class="checkbox-label-light">RM</div>
          <% } else {%>
            <div class="checkbox-label-light"></div>
            <% } %>
      </div>
      <div class="video-thumbnail-options"> <span title="Download" class="option-parts"> <i class="fa fa-download"></i> </span>  <span title="Edit" class="option-parts"> <i class="fa fa-pencil"></i> </span>  <span title="More Information" class="option-parts"> <i class="fa fa-info-circle"></i> </span> 
        <span
        title="View Details" class="option-parts"> <i class="fa fa-search"></i> 
          </span> <span title="Add to Clipbins" class="option-parts"> <i class="fa fa-folder-open"></i> </span>  <span title="Add to Cart" class="option-parts"> <i class="fa fa-cart-plus"></i> </span>  <span title="Contact me about this Clip" class="option-parts"> <i class="fa fa-envelope"></i> </span> 
      </div>
    </div>
  </div>
</script>
<div class="row" id="thumbnail_target"></div>

看起来您希望为应用内事件提供全球通风口

$(function() {
  var channel;
  channel = _.extend({}, Backbone.Events);
  $('.some-sort-dy-date-element').on('click', function() {
    channel.trigger('app:sort', {sortBy: 'date'});
  });
  $('.some-sort-dy-name-element').on('click', function() {
    channel.trigger('app:sort', {sortBy: 'name'});
  });
  // rest logic
});

您的VideoList集合应侦听这样的channel事件（initialize示例）：

var VideoList = Backbone.Collection.extend({
  initialize: function initialize() {
    this.listenTo(channel, 'app:sort', function someSortLogic() {
      this.trigger('your.app.ns.videos.SORTED');
    });
  }
});
var VideoView = Backbone.View.extend({
  initialize: function initialize() {
    this.listenTo(this.collection, 'your.app.ns.videos.SORTED', this.render);
  }
});