Question

I’ve got the following view file:

var BucketTransferView = Backbone.View.extend(
{
initialize: function(args)
{
    _.bindAll(this);
    this.from_bucket = args.from_bucket;
    this.to_bucket = args.to_bucket;
},
events:
{
    'click input[type="submit"]' : 'handleSubmit',
},
render: function()
{
    $(this.el).html(ich.template_transfer_bucket(this.model.toJSON()));
    return this;
},
handleSubmit: function(e)
{
    that = this;

    this.model.save(
        {
            date: 1234567890,
            amount: this.$('#amount').val(),
            from_bucket_id: this.from_bucket.get('id'),
            to_bucket_id: this.to_bucket.get('id')
        },
        {
            success: function()
            {
                // recalculate all bucket balances
                window.app.model.buckets.trigger(
                    'refresh',
                    [that.to_bucket.get('id'), that.from_bucket.get('id')]
                );
            }
        }
    );
    $.colorbox.close();
}
});

My buckets collection has this refresh method:

refresh: function(buckets)
{
    that = this;
    _.each(buckets, function(bucket)
    {
        that.get(bucket).fetch();
    });
}

My problem is that when the fetch() happens and changes the collection’s models, it’s not triggering change events in other view classes that has the same models in it. The view’s models have the same cid, so I thought it would trigger.

What’s the reason this doesn’t happen?

Answer 1

Fetch will create new model objects. Any view that’s tied to the collection should bind to the collection’s reset event and re-render itself. The view’s models will still have the same cid’s because they’re holding a reference to an older version of the model. If you look at the buckets collection it probably has different cids.

My suggestion is in the view that renders the buckets, you should render all the child views and keep a reference to those views. then on the reset event, remove all the child views and re-render them.

initialize: function()
{
    this.collection.bind('reset', this.render);
    this._childViews = [];
},

render: function()
{
    _(this._childViews).each(function(viewToRemove){
        view.remove();
    }, this);

    this.collection.each(function(model){
        var childView = new ChildView({
            model: model
        });
        this._childViews.push(childView);
    }, this)
}

I hope this works for you, or at least gets you going in the right direction.