通过单击非模板元素来对骨干排序集合

Question

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

简而言之，我有2个排序选项，分别为“按日期排序”和“按名称排序”。 当我单击这些元素时，我需要在主干视图中对集合进行排序

查看模板：

    <ul>
    <li>Sort By date</li>
    <li>Sort By name</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"><%= title %></div>
              <div class="video-date"><%= date %></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== true) { %>
              <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>

应用程式：

//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 VideoView = Backbone.View.extend({
   el: "#thumbnail_target",
   template: _.template($('#videos-thumbnail').html()),
   render: function(eventName) {
      _.each(this.model.models, function(video){
         var videoTemplate = this.template(video.toJSON());
         $(this.el).append(videoTemplate);
      }, this);
      return this;
   },
});

var videosView = new VideoView({model: videos});

videos.fetch({
    success: function() {
        videosView.render();
        videoslistView.render();
    }
});

});

我是骨灰级的新手，不知道如何进行这项工作

小提琴示例： 小提琴

Answer 1

由于您可以访问集合外部视图，因此可以简单地使用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> 

Answer 2

看起来您想要应用内事件的全局发泄

$(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);
  }
});