CODEWITHSUNDEEP
backbone.jsbackbone-stickit
LastTribunal
LastTribunal

Reputation: 1

Backbone stickit selectOptions from ajax

I am trying to populate a select using below.

 View: Backbone.View.extend({
                    initialize: function () {
                        this.setElement($('#templatePlaceholder'));
                    },
                    bindings: {

                        'select#List': {
                            observe: 'ddList',
                            selectOptions: {
                                collection: Q.when(getSelects.execute()).then(function (data) {
                                    console.dir(data);
                                    return data;
                                })

                            }
                        }
                    },

console returns an array object:

 [ { value: 1, label: "a" },   { value: 2, label: "b" } ]

But I get nothing.

If I define collection as: 

collection: function () { return [{ value: 1, label: "a" },{ value: 2, label: "b" }];}

then all works fine.

Upvotes: 1

Views: 1394

Answers (1)

user2095627
user2095627

Reputation: 362

There is potentially a couple of problems with this: that asynchronous code is executing immediately as View is being assigned which may not be desired; and collection is getting assigned to the result of executing that promise, not whatever is being returned by return data.

Some solutions:

1) You could bootstrap your select options on page load. This is a popular pattern in single page or Backbone apps. Basically, you have the backend put together json data-structures of common data and then render it to the page as a javascript variable. So the server side template (jsp, erb, php) would look something like this:

<!DOCTYPE html>
...
    <script type="text/javascript">
       window.bootstrap = { users: <%= userjson %>, ddlist: <%= ddlistjson %> };
    </script>
...

This method is recommended for performance and convenience.

2) If you have the option to run getSelects.execute() synchronously - for example if it is a jQuery ajax request, run it with the async:false option - then you could execute it in a couple of places in the view. During initialize will fetch the data when the view is actually constructed. Or you could assign your collection binding with a function that runs the getSelects routine, which blocks and then returns the data:

collection: function() {
    var collection = [];
    // Assumes that getSelects.execute() will block and run synchronously.
    Q.when(getSelects.execute()).then(function (data) {
       collection = data;
    });
    return collection;
}

This method is not recommended as it could leave your UI in a funky state as it blocks other javascript from running, and could potentially get hung up.

Upvotes: 1

Related Questions