Как преобразовать [объект Object] в Backbone в фактические данные

Смешивание «настоящего» кода JavaScript с вашими шаблонами (т. Е. Добавление <script> в шаблон, а не простых фрагментов JavaScript для объединения шаблона) обычно не работает так хорошо. Вам, как правило, будет легче, если вы разделите проблемы: элементы HTML помещаются в шаблон, функциональность подключается к представлению.

Я не так хорошо знаком с amChart, но многим библиотекам диаграмм (и картографии) необходимо знать несколько важных вещей об их целевом элементе, прежде чем они смогут выполнять какую-либо работу. В частности, они обычно хотят знать, где он находится на странице и насколько он велик, и они не узнают, пока <div> не будет отображен на странице. В приложении Backbone это обычно неверно, пока кто-то render не добавит представление и не добавит его el на страницу:

var v = new View;
// We don't know the position or size of anything yet.
v.render();
// We still don't know.
$('body').append(v.el);
// Now the size and position are available but we might have to
// pass control back to the browser first.

Вы сталкиваетесь с дополнительными трудностями, связанными с тем, что amChart, по-видимому, хочет id чего-то в DOM, в которое он должен втягиваться:

chart.write("chartdiv");

Но document.getElementById('chartdiv') не вернет ничего полезного до тех пор, пока не будет вызван render и кто-то не выполнил x.append(v.el) (или эквивалент).

Если вы ожидаете, что кто-то сразу же el вашего представления на страницу сразу после вызова render, вы можете поставить в очередь некоторый код для запуска после того, как браузер вернет управление (и, следовательно, у вас будет время, чтобы определить размер и положение вещей и сделать document.getElementById('chartdiv') сделать что-нибудь полезное), используя setTimeout с нулевым таймаутом:

render: function() {
    var _this = this;
    var chartData = ....

    // Do normal rendering and template stuff.

    setTimeout(function() {
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        //...
        chart.write("chartdiv");
    }, 0);
    return this;
}

Вы также можете использовать _.defer (что немногим больше, чем setTimeout(..., 1)), если хотите более подробно рассказать Это.

Возможно, придется разобраться с некоторыми специфическими для amChart вещами, но, надеюсь, это позаботится о сложных частях.

Кстати, этот AmCharts.ready вызов, который вы упомянули в комментариях, вероятно, не так хорошо работает с одностраничными приложениями, потому что он, вероятно, эквивалентен $(document).ready() и срабатывает только при загрузке страницы (т.е. только один раз в течение одностраничного приложение). Вместо этого вы можете использовать другие события, но вы должны иметь возможность использовать существующую структуру представления Backbone вместо того, чтобы полагаться на события, готовые для документа.