CODEWITHSUNDEEP
marionette
Vanderstaaij
Vanderstaaij

Reputation: 571

Form select box in Backbone Marionette

I'm trying using Backbone.Marionette to build an application. The application gets its data through REST calls.

In this application I created a model which contains the following fields:

I also created an ItemView that contains a complete form for the model. The template I'm using is this:

    <form>
            <input id="model-id" class="uneditable-input" name="id" type="text" value="{{id}}"/>
            <input id="model-name" class="uneditable-input" name="name" type="text" value="{{name}}" />
            <select id="model-language" name="language"></select>
            <select id="model-type" name="type"></select>
            <button class="btn btn-submit">Save</button>
    </form>

(I'm using Twig.js for rendering the templates)

I am able to succesfully fetch a model's data and display the view.

What I want to do now is populate the select boxes for model-language and model-type with options. Language and type fields are to be restricted to values as a result from REST calls as well, i.e. I have a list of languages and a list of types provided to me through REST.

I'm contemplating on having two collections, one for language and one for type, create a view for each (i.e. viewLanguageSelectOptions and viewTypeSelectOptions), which renders the options in the form of the template I specified above. What I am not sure of is if this is possible, or where to do the populating of options and how to set the selected option based on data from the model. It's not clear to me, even by looking at examples and docs available, which Marionette view type this may best be realized with. Maybe I'm looking in the wrong direction.

In other words, I'm stuck right now and I'm wondering of any of you fellow Backbone Marionette users have suggestions or solutions. Hope you can help!

Upvotes: 0

Views: 2488

Answers (1)

Rayweb_on
Rayweb_on

Reputation: 3727

Create a view for a Select in my opinion is not needed in the scenario that you are describing, as Im assuming that your languages list will not be changing often, and the only porpouse is to provide a list from where to pick a value so you can populate your selects in the onRender or initializace function of your view using jquery.

you can make the calls to your REST service and get the lists before rendering your view and pass this list to the view as options and populate your selects on the onRender function 

var MyItemView = Backbone.Marionette.ItemView.extend({
    initialize : function (options) {
       this.languages = options.languages;
       this.typeList = options.typeList;
    },
    template : "#atemplate",
    onRender : function () {
         this.renderSelect(this.languages, "#languagesSelect", "valueofThelist");
         this.renderSelect(this.typeList, "#typesSelect", "valueofThelist")
    },
    renderSelect :function (list, element, value) {
        $.each(list, function(){
            _this.$el.find(element).append("<option value='"+this[value]+"'>"+this[value]+"</option>");
        });
    }
})


var languagesList = getLanguages();
var typeList = getTypesList();
var myItemView = new MyItemView({languages:languagesList,typeList :typeList });

Hope this helps.

Upvotes: 3

Related Questions