I use Backbone.js and Firebase cloud service (+ Backbonefire). Clicking the link changes the hash in the URL. Router processes the hash: depending on the value, creates an instance of the new page (i.e., the page remains the same, but the content dynamically changes). For example, www.myapp.com/index.html#statistics.

Page.create('StatisticsPage'); function create(type) { try { removeCurrentPage(); require(['pages/'+type], function (Page) { currentPage = (new Page()).render(); }) } catch (error) { throw new Error('Unknown Page - ' + type); } }

That is, after creating a page instance, render () is called, which in turn calls renderComponents ().

 render: function () { this.$el.append(this.renderComponents()); } renderComponents: function () { var components = this.components, $html = $(); for (var i = 0; i < components.length; i++) { var component = components[i]; $html = $html.add(component.render().$el); } return $html; }

this.components contain views of the individual components of the page: a control panel (button, select, input) and a table. We receive a collection, we transfer it to representation, representation is written down in an array of components. This happens in currentPage = (new Page()).render(); before rendering.

 var itemCollection = ItemsControl.getItemsCollection(); var itemsView = new StatisticsView({ collection: itemCollection }); this.components.push(itemsView);

PROBLEM: render works before the data is synchronized with the server. You can, of course, hang up a handler for the "sync" event in the view and call the render, but it turns out that this will be the second call. Somehow not.

    1 answer 1

    First get the data, then render the view.

     var promise; promise = $.ajax({<Здесь конфиг запроса к серверу>}); promise.then(function(data) { var view = new yourClassView({params: data}); // Дальше ты делаешь с вьюхой все что надо, если у тебя // marionette то вставляешь в регион, если чистый бекбон, // то уже твоя вставка в DOM });