Fatal编程技术网
  • javascript/
  • Javascript 在主干中对集合进行排序

Javascript 在主干中对集合进行排序

javascript jquery ajax json backbone.js

Javascript 在主干中对集合进行排序,javascript,jquery,ajax,json,backbone.js,Javascript,Jquery,Ajax,Json,Backbone.js,我有一个API，它返回播客的JSON提要 这些播客显示在前端，但顺序与我需要的正好相反。我甚至更困惑，因为它调用的JSON提要的顺序是正确的，但我无法让它在前端像这样工作。请看一下我正在使用的代码： ${attributes.title} ${attributes.artist} ${attributes.title} $${attributes.price} $LAB .script（“jquery-1.4.4.min.js”）.wait（） .script（“jquery.tmpl.

我有一个API，它返回播客的JSON提要

这些播客显示在前端，但顺序与我需要的正好相反。我甚至更困惑，因为它调用的JSON提要的顺序是正确的，但我无法让它在前端像这样工作。请看一下我正在使用的代码：


${attributes.title}
${attributes.artist}
${attributes.title}
$${attributes.price}


$LAB
.script（“jquery-1.4.4.min.js”）.wait（）
.script（“jquery.tmpl.min.js”）
.script（“下划线-min.js”）
.script（“backbone-min.js”）
.script（“cacheprovider.js”）.wait（）
.script（“gallery.js”）；

任何帮助都将不胜感激

您是否尝试对集合进行反向排序：（注意负数以返回反向的集合？）

您的
comparator
正在尝试按
pid
排序，但我在JSON或其他任何地方都没有看到任何
pid
。我错过什么了吗？ 
var cache = new CacheProvider;


var Photo = Backbone.Model.extend({
   subalbum: function() { return 'c' + gallery._currentsub; }
});



var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    comparator: function(item) {
        return item.get('pid');
    }
});

function removeFallbacks(){
  var query = $('.jstest,.gallery');
        if(query.length){
          query.remove();
        }
}


var IndexView = Backbone.View.extend({
    el: $('#main'),
    indexTemplate: $("#indexTmpl").template(),

    render: function() {
        removeFallbacks();
        var sg = this;

        this.el.fadeOut('fast', function() {
        sg.el.empty();
        $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
        sg.el.fadeIn('fast');
        });
        return this;
    }

});


var SubalbumView = Backbone.View.extend({
    el: $('#main'),
    indexTemplate: $("#subindexTmpl").template(),

    initialize: function(options){

    },

    render: function() {
        var sg = this;
        removeFallbacks();
        this.el.fadeOut('fast', function() {
            sg.el.empty();
            $.tmpl(sg.indexTemplate, sg.model.toArray()).appendTo(sg.el);
            sg.el.fadeIn('fast');
        });
        return this;
    }

});


var PhotoView = Backbone.View.extend({
    el: $('#main'),
    itemTemplate: $("#itemTmpl").template(),


    initialize: function(options) {
        this.album = options.album;

    },

    render: function() {
        var sg = this;
        removeFallbacks();     
        this.el.fadeOut('fast', function() {
            sg.el.empty();
            $.tmpl(sg.itemTemplate, sg.model).appendTo(sg.el);
            sg.el.fadeIn('fast');
        });
        return this;
    }
});




var Gallery = Backbone.Controller.extend({
    _index: null,
    _photos: null,
    _album :null,
    _subalbums:null,
    _subphotos:null,
    _data:null,
    _photosview:null,
    _currentsub:null,

    routes: {
        "": "index",
        "subalbum/:id": "hashsub",
        "subalbum/:id/" : "directphoto",
        "subalbum/:id/:num" : "hashphoto"
    },

    initialize: function(options) {

        var ws = this;

        if (this._index === null){
            $.ajax({
                url: 'http://mikegradio.com/api/v1/podcasts/export/?tags__title=sports&sort_by=-rank&limit=50',
                dataType: 'json',
                data: {},
                success: function(data) {
                    ws._data = data;
                    ws._photos = new PhotoCollection(data);
                    ws._index = new IndexView({model: ws._photos}); 
                    Backbone.history.loadUrl();

                }
            });
            return this;
        }
        return this;
    },


    index: function() {
        this._index.render();
    },


    hashsub:function(id){

       var properindex = id.replace('c','');    
       this._currentsub = properindex;
       this._subphotos = cache.get('pc' + properindex) || cache.set('pc' + properindex, new PhotoCollection(this._data[properindex].subalbum));
       this._subalbums = cache.get('sv' + properindex) || cache.set('sv' + properindex, new SubalbumView({model: this._subphotos}));
       this._subalbums.render();


    },

    directphoto: function(id){

    },

      hashphoto: function(num, id){
        this._currentsub = num;

        num = num.replace('c','');

        if(this._subphotos == undefined){
           this._subphotos = cache.get('pc' + num) || cache.set('pc' + num, new PhotoCollection(this._data[num].subalbum));
         }  
        this._subphotos.at(id)._view = new PhotoView({model: this._subphotos.at(id)});
        this._subphotos.at(id)._view.render();

      }
});


gallery = new Gallery();
Backbone.history.start();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" href="gallery.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="shadows.css" type="text/css" media="screen" charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="buttons.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="ipad.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="desktop.css" type="text/css" media="screen" charset="utf-8" />

                <script id="indexTmpl" type="text/x-jquery-tmpl">
                <div class="item drop-shadow round">
                 <div class="item-image">
                     <a href="#subalbum/${cid}"><img src="${attributes.image}" alt="${attributes.title}" />
                     </a>
                 </div>

                </div>
                </script>


                <script id="subindexTmpl" type="text/x-jquery-tmpl">
                <div class="track drop-shadow round">
                 <div class="item-image subalbum">
                      <div class="item-artist">${attributes.title}</div>
                   <audio controls preload="none" id="audioControl" id="audio-player" src="${attributes.media}" type="audio/mp3" controls="controls"></audio>
                      <div class="item-price">${attributes.duration}</div>
                      <a href="#subalbum/${subalbum}/${attributes.cid}">Shop</a>
                </div>

                 </div>
                </script>

                    <script id="itemTmpl" type="text/x-jquery-tmpl">
                <div class="item-detail">
                  <div class="item-image drop-shadow round"><img src="${attributes.large_image}" alt="${attributes.title}" /></div>
                  <div class="item-info">
                    <div class="item-artist">${attributes.artist}</div>
                    <div class="item-title">${attributes.title}</div>
                    <div class="item-price">$${attributes.price}</div>
                    <br />
                    <div class="item-link"><a href="${attributes.url}" class="button">Buy this item</a></div>
                    <div class="back-link"><a href="#" class="button">&laquo; Back to Albums</a></div>
                  </div>
                </div>
                </script>

    </head>
    <body>
        <div id="container">
            <div id="main">
            </div>
        </div>
        <script src="LAB.min.js" type="text/javascript"></script>


<script type="text/javascript">
           $LAB
           .script("jquery-1.4.4.min.js").wait()
           .script("jquery.tmpl.min.js")
           .script("underscore-min.js")
           .script("backbone-min.js")
           .script("cacheprovider.js").wait()
           .script("gallery.js");      
        </script>
    </body>
</html>

comparator: function(item) {
    return -item.get('pid');
}