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

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

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

视图模板：

    <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>

我是主干线和下划线的新手，我不知道如何使这项工作

---

fiddle示例：

看起来您需要应用程序内事件的全局通风

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

您的

视频列表

收藏应收听类似的

频道

事件（例如

初始化

）：

---

看起来您需要应用程序内事件的全局通风

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

您的

视频列表

收藏应收听类似的

频道

事件（例如

初始化

）：

---

由于您可以访问集合外部视图，因此只需使用jquery为

绑定事件处理程序，即可更新集合并对其进行排序。然后，当集合上发生排序事件时，让视图重新呈现自身

在演示中，我使用了字符串和数字类型的排序属性，这样我就可以直接将其设置为comparator。您应该编写一个定制的comparator函数，该函数根据不同类型的参数（如字符串、数字、日期等）处理排序

//主干线和下划线
$（函数（）{
var Videos=Backbone.Model.extend（）；
var VideoList=Backbone.Collection.extend({
型号：视频，
网址：'https://api.myjson.com/bins/4mht3'
});
var videos=新视频列表（）；
var VideoListView=Backbone.View.extend({
el:“缩略图目标”，
模板：35;.template（$（'#视频缩略图'）.html（）），
初始化：函数（）{
this.listenTo（this.collection，'sort'，this.render）；
},
渲染：函数（eventName）{
这个。$el.empty（）；
_.每个（此.collection.models、函数（视频）{
var videoTemplate=this.template（video.toJSON（））；
此.$el.append（视频模板）；
}，这个）；
归还这个；
},
});
var videosView=新的VideoListView({
收藏：视频
});
视频。获取({
成功：功能（集合）{
videosView.render（）；
}
});
$（'sortBy'）。在（'click'，'li'，function（）上{
var category=$（this.text（）.split（'Sort By'）[1]；
videos.comparator=类别；
videos.sort（）；
});
});


按平均数排序
按标题排序

RM
由于您有权访问集合外部视图，因此只需使用jquery为
绑定事件处理程序，即可更新集合并对其排序。然后，当集合上发生排序事件时，让视图重新呈现自身

在演示中，我使用了字符串和数字类型的排序属性，这样我就可以直接将其设置为comparator。您应该编写一个定制的comparator函数，该函数根据不同类型的参数（如字符串、数字、日期等）处理排序


//主干线和下划线
$（函数（）{
var Videos=Backbone.Model.extend（）；
var VideoList=Backbone.Collection.extend({
型号：视频，
网址：'https://api.myjson.com/bins/4mht3'
});
var videos=新视频列表（）；
var VideoListView=Backbone.View.extend({
el:“缩略图目标”，
模板：35;.template（$（'#视频缩略图'）.html（）），
初始化：函数（）{
this.listenTo（this.collection，'sort'，this.render）；
},
渲染：函数（eventName）{
这个。$el.empty（）；
_.每个（此.collection.models、函数（视频）{
var videoTemplate=this.template（video.toJSON（））；
此.$el.append（视频模板）；
}，这个）；
归还这个；
},
});
var videosView=新的VideoListView({
收藏：视频
});
视频。获取({
成功：功能（集合）{
videosView.render（）；
}
});
$（'sortBy'）。在（'click'，'li'，function（）上{
var category=$（this.text（）.split（'Sort By'）[1]；
videos.comparator=类别；
videos.sort（）；
});
});


按平均数排序
按标题排序

RM
这里似乎有输入错误，您将
VideoList
作为模型传递给视图。您正在尝试渲染两个视图，
videosView.render（）；videoslistView.render（）但您是否只创建了1。。。请确保发布工作代码，以便我们能够集中精力解决手头的问题，而不是修复其他问题issues@TJ更新了小提琴，如果您在这里输入错误，请将
VideoList
作为模型传递给视图。您正在尝试渲染两个视图，
videosView.render（）；videoslistView.render（）但您是否只创建了1。。。请确保发布工作代码，以便我们能够集中精力解决手头的问题，而不是修复其他问题issues@TJ更新了小提琴谢谢@Lesha Ogonkov，我理解将事件扩展到全球事件的方法，但不确定如何在视图中调用它？你能帮我升级一下吗？我已经更新了这个例子，把它和你剩下的代码结合起来就行了。我建议在集合和视图之间使用自定义事件，让它知道，集合已完成排序，视图现在可以重新呈现自己。我看不到任何操作，请您将小提琴更新为工作状态，以便我能够理解代码的工作。感谢@Lesha Ogonkov，我理解将事件扩展到全局事件的方法，但我不知道该如何称呼它？你能帮我翻译一下吗？我有一个更新的例子，就是c
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);
  }
});