Integration of webix tables and backbone

Question

I am tying to integrate webix tables with a backbone collection as shown in the webix docs (http://docs.webix.com/desktop__backbone_collections.html) however it does not seem to work. The object sync call happens, but no data is loaded.

   budgets = new Backbone.Budget.Collection(window.budget)
   list =
        width               : 320
        view                : "datatable"
        id                  : "budget_list"
        backbone_collection : budgets
        select              : true
        scroll              : false
        columns             :[
                {header : "Month",             id: "budget_month"}
                {header : "Year",              id: "budget_year"}
                {header : "Currency",          id: "base_currency"}
                ]

        on: {
                onAfterRender       :  () ->
                        console.log("Sync ", @_settings)
                        @sync(@_settings.backbone_collection)

                }

Answer 1

Its very possible that the server you are hitting 1) is not specifying 'Content-type: application/json' and this is rejected by the client on the response; and, or 2) doesn't response to the OPTIONS pre-flight thus throws up a CORS security block. Both are difficult to solve without access to the server.

Curl will not be subject to the CORS issue but a browser-based REST client will -- and thus best represent your issue.

Try using the Chrome advanced rest client with the URL and headers given in the UI.

And if you dont know the URL and header then sniff your requests when you run that UI.

Answer 2

Calling .sync from the onAfterRender causes the problem, as sync causes re-rendering of datatable, which triggers new sync and it causes new re-rendering and etc.

To break this loop you can use webix.once which will guarantee that handler will be executed only once.

Check the updated snippet http://webix.com/snippet/5dd61a47