如何将 Backbone 中的 [object Object] 转换为实际数据答案

【问题标题】：How to convert [object Object] in Backbone to actual data如何将 Backbone 中的 [object Object] 转换为实际数据
【发布时间】：2013-09-04 09:59:30
【问题描述】：

我的 Backbone 视图 (file.js) 中有一个函数，其中填充了以下格式的 JSON 响应：-

主干视图中的功能：-

chart_data: function(){
    var all_stats = this.collection.toJSON();
    $("#page-container").html(this.users_by_loc({
        platform_stats: all_stats,
        graph_data: all_stats.items.slice(0,5) 
        // I want to use the top 5 entries to plot graph
    }));
}

响应作为 all_stats 的一部分出现（来自我的 api 调用 - 我在服务器端使用 Rails）：-

{
   "items":
   [
       {
           "loc": "Chennai",
           "users": 11707
       },
       {
           "loc": "Hyderabad",
           "users": 4327
       },
       {
           "loc": "Pune",
           "users": 3625
       },....(many more entries)

   ]
}

现在，我正在尝试将 graph_data 参数（在我上面的 Backbone 视图 中定义）中存在的 json 响应传递给名为 chartData 在我的 jst.ejs 模板中定义（代码如下）。我的 AM 图表 JS 代码使用此变量（chartData）来实际绘制图形。

我的 jst.ejs 文件包含填充图形数据和绘制图形的代码，如下所示：-

<script>
    var chart;  

    chartData = "<%= graph_data %>"    
    console.log("chartData: ", chartData);

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;

                //additional code to help plot the chart  

                chart.write("chartdiv");
            });

</script>

<div id="chartdiv" style="width: 60%; height: 400px;"></div>

我的目前的障碍是当我这样做的时候..

chartData = "<%= graph_data %>"    
console.log("chartData: ", chartData);

.. 在我的 jst.ejs 模板中，chartData 变量而不是将实际数据作为 all_stats 的一部分（显示为上）在我的萤火虫控制台中返回以下内容：-

chartData: [object Object],[object Object],[object Object],[object Object],[object Object]

我如何正确地将存在于 graph_data 变量中的实际数据（作为我的 backbone 视图 的一部分）分配给变量 chartData 出现在我的 jst.ejs 模板中以绘制图表？

【问题讨论】：

你为什么在模板中使用<script>？为什么不在 JavaScript 中做 JavaScript？
@muistooshort ：我认为你的观点很好，我之前没有想到这一点。假设我在我的 Backbone 视图（js 文件）本身中编写了绘制图表的逻辑，我只需要在我的 Backbone 模板（jst.ejs 文件）中写 <div id="chartdiv" style="width: 60%; height: 400px;"></div> 并且这会工作吗？
可能。您只需在正确的时间调用 Backbone 视图中的图表内容。
@muistooshort：我正在尝试，但我现在面临的问题是我的主干视图中的chart.write("chartdiv"); 无法识别模板中的chartdiv。是一种我可以将数据分配为我的 AM 图表功能的一部分的方法 2 chart.dataProvider 属性 n 实现其余的东西 2 在我的 jst.ejs 模板中绘制图表？如果是这样，我应该将我在我的 AM 图表函数中操作的对象作为参数传递给模板，以便稍后我可以使用它来绘制 d 图形。使用这种方法，chartdiv 将被识别为模板中绘图逻辑的一部分。
如果调用者要立即将视图放入 DOM 中，请查看 info _.defer 或 setTimeout(..., 0)。

标签： javascript json backbone.js backbone-views amcharts

【解决方案1】：

将“真正的”JavaScript 代码与您的模板混合（即将<script> 放入模板中，而不是简单的 JavaScript 部分将模板放在一起）通常效果不佳。如果您将关注点分开，您通常会更轻松：HTMLish 的东西放在模板中，功能连接在视图中。

我对 amChart 不是很熟悉，但许多图表（和映射）库需要了解有关其目标元素的一些重要信息，然后才能进行任何工作。特别是，他们通常会想知道它在页面上的位置以及它有多大，而这些在<div> 被呈现到页面之前是不知道的。在 Backbone 应用程序中，除非有人 rendered 视图并将其 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 显然想要它应该绘制到的 DOM 中的 id 的额外困难：

chart.write("chartdiv");

但document.getElementById('chartdiv') 不会返回任何有用的东西，直到render 被调用并且有人完成x.append(v.el)（或等效）之后。

如果您希望有人在调用render 后立即将您的视图的el 转到页面，那么您可以排队一些代码以在浏览器重新获得控制权后运行（因此有时间计算大小和事物的位置，并使document.getElementById('chartdiv')做一些有用的事情）使用setTimeout with a timeout of zero：

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 特定的东西需要处理，但希望这能解决困难的部分。

顺便说一句，您在 cmets 中提到的 AmCharts.ready 调用可能不适用于单页应用程序，因为它可能等效于 $(document).ready() 并且仅在加载页面时触发（即仅一次单页应用的持续时间）。您可能可以使用其他事件来代替，但您应该能够使用现有的 Backbone 视图结构，而不是依赖文档就绪事件。

【讨论】：