0

我已经从服务器中提取了一组模型，如下所示：

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

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

我目前的看法：

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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
                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;
});
4

1 回答 1

1

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

另一种方法是使用该Backbone.Collection shift方法：

从集合中移除并返回第一个模型。采用与删除相同的选项。

因此，yourCollection.getNextQuestion()您只需致电yourCollection.shift(). 但是，这会修改集合（删除您shift提出的问题），因此如果您希望能够向后浏览集合，您可能需要使用该currentQuestion方法。

于 2013-04-25T21:09:37.160 回答