Question

Having a bit of trouble getting my view to update on a drop event. I’m pretty sure the problem is in the function handleDrop(). Re-rendering of the view has worked on normal model.set({}) tests in the browser. So, I know that is not where the problem lies…

The Backbone Router

App.Routers.Dashboard = Backbone.Router.extend({

routes: {
    "": "index"     
},

initialize: function(options) {

    },

index: function() {

var preflist = new App.Models.PrefList({});

preflist.fetch({
    success: function() {
      var paneloneview = new App.Views.PanelOne({ model: preflist });
      $('#panelone').html(paneloneview.render().$el);
    }  
});

var sourceID;
var payloads = {
poolpricedraggable: "poolprice",
nonedraggable: "smp"
};

var element = function(id) { return document.getElementById(id); }

function handleDragOver(event) {
if(event.preventDefault) event.preventDefault();
return false;
}
function handleDrop(event) {
    dropzone = this.id;
    if(event.preventDefault) event.preventDefault();
    console.log("recevied the data: " + payloads[sourceID] + " in #" + dropzone);
    var attribute = preflist.get('panel_one');
    preflist.set({panel_one: attribute});
    preflist.save();
}  

element('panelone').addEventListener('dragover', handleDragOver, false);            
element('panelone').addEventListener('drop', handleDrop, false);

The PanelOne View

App.Views.PanelOne = Backbone.View.extend({

initialize: function() {                
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
},

render: function(){
    var panelonesetting = this.model.get('panel_one');
    this.$el.html(JST['dashboard/' + panelonesetting]({}));
return this;
}

});

Kindest regards,
AC

Answer 1

One problem I can see here is that you are trying to set the value of a model using the same value from itself – which basically gets ignored as you are replacing value with itself and change in the model doesn’t get detected – thus the render method is not being called.

You might want to manually call the render or trigger change event on the model yourself using the trigger method on the model. (if there is anything else going on outside of the code you provided – cause with what I can see here nothing would change anyway?)

Have you forgot to use information from the dragged object to alter settings of the model?