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 = "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;
});

Answer 1

正如@Loamhoof所提到的，一种方法是在集合中添加currentQuestion属性，然后给它某种getNextQuestion方法，增加currentQuestion然后返回{{1 }}

另一种方法是使用this.at(this.currentQuestion) Backbone.Collection方法：

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

因此，您只需拨打shift，而不是yourCollection.getNextQuestion()。但是，这会修改集合（删除您yourCollection.shift()的问题），因此如果您希望能够向后搜索集合，则可能需要使用shift appropach。

单击时按顺序渲染骨架模型

1 个答案: