Question

I have a multiselect dropdown that I’m rendering with Backbone. As user selects or deselects options, I’d like those (de)selections to be saved asynchronously via Backbone.

I found Backbone.Picky, and thought it might be helpful in my endeavor, but I can’t seem to get it to detect selects.

In my FieldView‘s clicked function below, console.log(this.model.selected); always writes undefined to the log. Why?

    var Field = Backbone.Model.extend({
        initialize: function(){
           var selectable = new Backbone.Picky.Selectable(this);
           _.extend(this, selectable);
        }
    });

    var FieldView = Backbone.View.extend({
        tagName: "option",

        initialize: function(){
            _.bindAll(this, 'render');
        },
        events: {
            "click":"clicked"
        },
        clicked: function(e) {
            var data_type = this.model.get("DATA_TYPE");
            console.log(this.model.selected);    // why is this undefined?
            console.log("it's a " + data_type);
        },
        render: function(){
            this.$el.attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name'));
            return this;
        }
    });

Here’s a jsfiddle http://jsfiddle.net/EAZCt/2/ for more context.

Using Backbone, how can I asynchronously save the select-status of options in a multiselect list?

Answer 1

Your model object doesn’t ever have “selected” property because you never select the model. I have never used Backbone.Picky but it seems that you could try:

var FieldView = Backbone.View.extend({
    tagName: "option",

    initialize: function(){
        this.model.on('selected', this.selected, this);
    },
    events: {
        "click":"clicked"
    },

    clicked: function() {
        this.model.select();
    },
    selected: function() {
        var data_type = this.model.get("DATA_TYPE");
        console.log(this.model.selected);
        console.log("it's a " + data_type);
    },
    render: function(){
        this.$el.attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name'));
        return this;
    }
});

http://jsfiddle.net/hGEYL/