Issue about backbone and collections and added mechanism

Question

I develop a web application - it's a some html block which must rerender when user pres next or prev button - it's a carousel.

I have an array of 5 elements (videos) and user view it one by one pressing next or prev button.

When application is init - i show first element (video) - this.restore(0); When user reach 5 element and press next - we must show him 1 element. And when user view fitst elelement and press prev button - we must show last element - simple circle carousel.

And i added index variable to model - model.index = index; in order to know on what element i am on - var currentPosition = this.model.index; when render

I have the following code:

Model:

var TopVideo = BaseModel.extend({
    urlRoot: "/user/partnerphotovideo/id/"
});

Template:

<script type="text/x-underscore-template" id="top-video-template">
<div class="b-box top-video">
    <h2 class="box-title"><span>Top videos:</span> Great_Sarah</h2>
    <div class="box-content">
      <div class="b-photo video">
        <div class="photo"><img alt="" src=""></div>
      </div>
      <div class="b-buttons">
        <a data-profile-id = "<%- nextPositionId %>" class="btn next" href="#"></a>
        <a data-profile-id = "<%- prevPositionId %>" class="btn prev" href="#"></a>
        <a class="button" href="#">Open in big Screen</a>
      </div>
    </div>
</div>
</script>

View:

var TopVideoView = BaseView.extend({
    templateId    : '#top-video-template',
    model : new TopVideo,
    collection  : new Backbone.Collection,
    profileIds : [],

    events: {
        "click [data-profile-id]" :  function (event) {
            var profileId = $(event.currentTarget).data('profile-id');
            this.restore(profileId);
        },
    },

    initialize: function(profileIds)
    {
        if (profileIds.length > 0) {
            this.profileIds = profileIds;
            this.setElement($('#top_videos'));
            this.template = _.template($(this.templateId).html());
            this.model.on("change", this.render, this);
            this.restore(0);
        }
    },

    render: function()
    {
        var currentPosition = this.model.index;
        if (currentPosition < this.profileIds.length - 1) {
            nextPositionId = currentPosition + 1 
        } else {
            nextPositionId = 0; 
        }
        if (currentPosition != 0) {
            prevPositionId = currentPosition - 1 
        } else {
            prevPositionId = this.profileIds.length - 1; 
        }
        this.$el.html(this.template({nextPositionId:nextPositionId,prevPositionId:prevPositionId}));  

    },

    restore: function(index) {
        var id = this.profileIds[index];
        var current = this.collection.at(index);
        if (!current) {
            self = this;
            this.model.url = this.model.urlRoot + id + '/?videoType=presentation_video';
            this.model.fetch({
                success: function(model) {
                    model.index = index;
                    model.trigger("change");
                    self.collection.add(model);
                },
                silent: true
            });
        } else {
            current.trigger("change");
        }

    },

});

Calling view in my app (piece of code from my app):

app.views = (function () {
        var items = {};

        return {
            instance: function (name, params) {
                if (!this.exists(name)) {
                    if (!$.isEmptyObject(window[name])) {
                        items[name] = new window[name](params);
                    }
                }

                return items[name];
            },

            exists: function (name) {
                return name in items;
            }
        };
    })();

var profileIds = ['dasdsad342432','4332432dsadsad','dasdsa3421424','dsadsadsad654654','222ddd'];
app.views.instance('TopVideoView',profileIds);

;

My problem is that - when I added new model to collection (self.collection.add(model);) - I still have one Model in Collection. I cannot add more then one model to collection - model attributes is different in these models.

Also trying:

self.collection.add(model,{"at" : index});
     but still no result

And when using:

model1 = {a : index};
 self.collection.add(model1);

It's added more than one models.

Trying like that:

model.set({index: index},{silent : true});
self.collection.add(model);

And when i use:

model.set({id: id},{silent : true});
self.collection.add(model);

It added to collection more then 1 model. But all this models are the same. They have same cId (c0), same attributes (attributes of the last model).

Also no effect

What i do wrong? have you any thoughts about it?

Thanks in advance.

may be it is a problem because i try to insert the same model to collection each time - that is why all models in collection are the one model — user3193094, Jun 26 '14 at 15:52

user3193094 · Answer 1 · 2014-06-26T16:15:05.120

Problem have Solved. I simply need to create model each time when i am going to add it to collection.

restore: function(index) {

        var id = this.profileIds[index];

        //var current = this.collection.at(index);
        var current = this.collection.get({ index: index });

        if (!current) {
            console.log('not fountd');
            self = this;
            this.model = new TopVideo;
            this.model.on("change", this.render, this);
            this.model.url = this.model.urlRoot + id + '/?videoType=presentation_video';

            this.model.fetch({
                success: function(model) {

                    model.set({index: index},{silent : true});
                    model.set({id: id},{silent : true});
                    self.collection.add(model,{merge: true});
                    model.trigger("change");

                },
                silent: true
            });
        } else {
                    this.model = current;
            current.trigger("change");
        }

    },

Issue about backbone and collections and added mechanism

1 Answers1