上点击

Question

渲染骨架模型从顺序收集我从服务器像这样拉下来的模型的集合：

我只想渲染视图中的第一个模型，然后当用户点击一个按钮渲染的视图我们依次渲染集合中的下一个模型。

我无法渲染整个视图，然后显示/隐藏，因为这些是测验问题，人们很可能会弄清楚如何作弊！

我当前视图：

define([ 
    'domLib', 
    'underscore', 
    'backbone', 
    'router', 
    'config', 
    'collection/quiz', 
    'text!template/quiz.html' 
    ], 
    function($, _, Backbone, Router, AppConfig, QuestionList, QuizTemplate) { 

     var QuizView = Backbone.View.extend({ 
      el: '[data-view="main-content"]', 
      template: _.template(QuizTemplate), 
      initialize: function onInitialize(param){ 
       this.collection = new QuestionList(); 
       this.collection.fetch({ 
        reset: true, 
        data: { 
         categoryId: param.id || AppConfig.constants.CATEGORY, 
         limit: AppConfig.constants.QLIMIT 
        } 
       }); 
       this.collection.bind('reset', this.render, this); 
      }, 
      render: function onRender(){ 
       this.$el.html(this.template({questions: this.collection.toJSON()})); 
      } 
     }); 

     return QuizView; 
}); 

我收藏;以base64解码有解码来自服务器的响应编码：

define([ 
    'domLib', 
    'underscore', 
    'backbone', 
    'router', 
    'config', 
    'model/quiz' 
    ], 
    function($, _, Backbone, Router, AppConfig, Quiz) { 

     var QuestionList = Backbone.Collection.extend({ 
      model: Quiz, 
      url: AppConfig.api.game.quiz, 
      parse: function onParse(response){ 

       var self = this; 

       _.each(response, function(obj, index){ 
        _.each(obj, function(val, key, list){ 
         if(key !== 'id'){ 
          obj[key] = self.decode64(val); 
         } 
        }); 
        self.push(obj); 
       }); 

       return this.models; 
      }, 
      decode64: function onDecode(data){ 

       var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
       var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, 
        ac = 0, 
        dec = '', 
        tmp_arr = []; 

       if (!data) { 
        return data; 
       } 

       data += ''; 

       do { // unpack four hexets into three octets using index points in b64 
        h1 = b64.indexOf(data.charAt(i++)); 
        h2 = b64.indexOf(data.charAt(i++)); 
        h3 = b64.indexOf(data.charAt(i++)); 
        h4 = b64.indexOf(data.charAt(i++)); 

        bits = h1 << 18 | h2 << 12 | h3 << 6 | h4; 

        o1 = bits >> 16 & 0xff; 
        o2 = bits >> 8 & 0xff; 
        o3 = bits & 0xff; 

        if (h3 == 64) { 
        tmp_arr[ac++] = String.fromCharCode(o1); 
        } else if (h4 == 64) { 
        tmp_arr[ac++] = String.fromCharCode(o1, o2); 
        } else { 
        tmp_arr[ac++] = String.fromCharCode(o1, o2, o3); 
        } 
       } while (i < data.length); 

       dec = tmp_arr.join(''); 

       return dec; 
      } 
     }); 

     return QuestionList; 
}); 

Answer 1

正如@Loamhoof提到的，一个办法是一个currentQuestion属性添加到您的收藏，然后给它某种getNextQuestion方法，增加currentQuestion的然后返回this.at(this.currentQuestion)。

另一种方法是使用Backbone.Collectionshift方法：

取出并从集合返回的第一款车型。采取与删除相同的选项。

因此，您可以拨打yourCollection.shift()来代替yourCollection.getNextQuestion()。但是，这会修改集合（删除问题shift），所以如果您希望能够在集合中倒退，则可能需要使用currentQuestion对照。