Question

This may be due to the fact that I’m new to JavaScript, and I just don’t know the correct syntax, but I can’t get my backbone model attributes to set on this Drop Event with this current syntax. Any suggestions? I’ve ran some tests with the handleDrop already and been able to set and save the model instance, but not with this current code in the handleDrop function.

Other suggestions regarding more efficient ways of writing this are always welcome 🙂

        //Set the data contained by the draggable elements
        var sourceID;
        var payloads = {
            poolpricedraggable: "poolprice",
            nonedraggable: "none"
        };

        //Set the data contained in the droppable elements
        var targetID;
        var targets = {
            panelone: "panel_one:",
            paneltwo: "panel_two:",
            panelthree: "panel_three:",
            panelfour: "panel_four:",
            panelfive: "panel_five:",
            panelsix: "panel_six:"              
        }
        
        //Create variable for all draggable & droppable elements
        var element = function(id) { return document.getElementById(id); }
        
        //Create event handlers for all drag and drop events
        function handleDragStart(event) {
            sourceID = this.id;
        }
        function handleDrop(event) {
            if(event.preventDefault) event.preventDefault();
            targetID = this.id;
            var dataattribute = targets[targetID];
            var datavalue = payloads[sourceID];
            var data = dataattribute + " " + datavalue;
          preflist.set(data);
            preflist.save();
        }
        
        //Add listeners for those events to the correct dashboard elements
        element('poolpricedraggable').addEventListener('dragstart', handleDragStart, false);

        element('panelone').addEventListener('drop', handleDrop, false);
        element('paneltwo').addEventListener('drop', handleDrop, false);
        element('panelthree').addEventListener('drop', handleDrop, false);
        element('panelfour').addEventListener('drop', handleDrop, false);
        element('panelfive').addEventListener('drop', handleDrop, false);
        element('panelsix').addEventListener('drop', handleDrop, false);

Answer 1

I make the assumption that preflist is a Backbone Model. Your mistake happens here:

var data = dataattribute + " " + datavalue;
preflist.set(data);

The data variable here is a string, but the Backbone model set -function takes a hash of attributes as key-value pairs

set model.set(attributes, [options])

Set a hash of attributes (one or many) on the model…

So you should do it like this:

// var data = dataattribute + " " + datavalue; REMOVE THIS
var data = {};
data[dataattribute] = datavalue;
preflist.set(data);

EDIT, mu is too short’s comment was better

According to Backbone.js docs

You may also pass individual keys and values.

So this is a better solution, obviously:

preflist.set(dataattribute, datavalue);

Hope this helps?