骨幹排序集合通過點擊非模板元素

總之我的骨幹收集整理，我有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(); 
    } 
}); 

});

是新手骨幹和強調，我不知道如何使這項工作

例小提琴：Fiddle

來源

2016-02-26 Jothi Kannan

看來你在這裏錯字參數排序的自定義比較器功能，你傳遞'VideoList'爲模型到視圖。 –

您正在嘗試渲染2個視圖，'videosView.render（）; videoslistView.render（）;'但你是否只創建了1 ...請確保發佈工作代碼，以便我們可以專注於手頭的問題而不是修復其他問題 –

@TJ更新了小提琴https：// jsfiddle.net/w07f71qu/1/ –

既然你有外視圖訪問集合，您可以簡單地使用jquery綁定<li>的事件處理程序，該程序更新集合comparator並對其進行排序。然後讓視圖在集合上發生排序事件時重新呈現它自己。

演示我使用字符串和數字類型的排序屬性，以便我可以直接將其設置爲比較。你應該編寫處理基於不同類型的像字符串，數字，日期等Updated fiddle

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

來源

2016-02-26 08:15:14

我沒有看到任何動作 –

@JothiKannan我想我分享了錯誤的jsfiddle鏈接，請參閱https://jsfiddle.net/w07f71qu/3/ –

Greate Answer，與@Lesha Ogonkov比較時非常簡單，非常感謝:) –

看起來你想要的應用程式內事件的全球發泄

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

來源

2016-02-26 07:57:14

謝謝@Lesha Ogonkov，我瞭解將事件擴展到全局事件，但不知道如何在View中調用它？你能否提出要求？ –

我已經更新了示例，只是將它與您的其他代碼結合使用。我建議在集合和視圖之間使用自定義事件，讓它知道集合已完成排序，現在可以重新呈現自己。 –

我沒有看到任何動作，可否請更新小提琴作爲工作，所以我可以理解什麼是我的代碼worng。 –

回答

相關問題