CODEWITHSUNDEEP
javascriptjquerybackbone.jsbackbone-forms
Michael R.
Michael R.

Reputation: 50

Backbone Forms use Backbone Collection and an options for Select Editor

I'm new to Backbone Forms. I want to create a Select field with passing backbone collection to the options. Reading BBF docs does't make it clear.

--- taking from docs ------

Backbone collection notes If using a Backbone collection as the options attribute, models in the collection must implement a toString() method. This populates the label of the <option>. The ID of the model populates the value attribute.

---- taking from docs -----

can anyone provide good step by stem example?

i have following code 

var ListModel = Backbone.Model.extend({
    defaults: {
        name: '',
        value: ''
    }
});

var Collection = Backbone.Collection.extend({
    model: ListModel
});

var collection = new Collection([
    {name: 'test1', value: '1'},
    {name: 'test2', value: '2'},
    {name: 'test3', value: '3'}
]);

var User = Backbone.Model.extend({
    schema: {
        field1: { type: 'Select', options: collection },
        field2: { type: 'Select', options: ['Select 2']},
        field3: { type: 'Select', options: ['Select 3']}
    },

    fieldsets: {
        legend: 'Select Form',
        fields: ['fields1', 'fields2','fields3']
    },

    idPrefix: null
}

var user = new User();

var form = new Backbone.Form({
    model: user,
    idPrefix: null
}).render();

$('#main').append(form.el);

Field1 d rop down get rendered with [object Object] value

Upvotes: 1

Views: 1315

Answers (1)

evilcelery
evilcelery

Reputation: 16139

You need to add a toString method to your ListModel, for example:

var ListModel = Backbone.Model.extend({
    defaults: {
        name: '',
        value: ''
    },

    toString: function() {
        return this.get('name');
    }
});

Upvotes: 2

Related Questions