【发布时间】：2016-04-25 13:10:05
【问题描述】：
我有一个将 html（来自数据库）加载到 div 中的站点。 使用 Backbone 作为框架，使用 Handlebars 作为模板工具。
在这个 html 中，我还有一些 javascript 也可以完美运行。
但是，当我尝试同时包含 plotly cdn 甚至整个 javascript 时，它不会识别 Plotly。导致错误：
“情节未定义”
我尝试使用 jQuery 解决此加载 Plotly 问题，甚至将完整的缩小 Plotly 代码放入 HTML 中，但没有结果。
这是加载到 div 中的 html / javascript 代码。：
<div class='ldbp_img' style='overflow: auto; height:100%; width: 100%;'></div>
<script type='application/javascript' language='JavaScript'>
if (!Date.now) {
Date.now = function() { return new Date().getTime(); }
}
var img = new Image(),
imageUrl = "http://new.image.nu/1234.png',
interval = 30000;
$(img).attr('width', '100%');
$(img).attr('height', '100%');
var setImg = function () {
//var img = new Image();
var time = Math.floor(Date.now() / 1000);
img.src = imageUrl + time;
$('.ldbp_img').html(img);
};
img.src = imageUrl';
$('.ldbp_img').html(img);
if (window.countInt) {
clearInterval(window.countInt);
window.countInt = null;
}
window.countInt = setInterval(setImg, interval);
</script>
当情节加载时它不起作用：
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
Plotly.plot('my-graph', data, layout);
</script>
我也尝试过使用 jQuery，但没有结果：
<div id='my-graph' style='overflow: auto; height:100%; width: 100%;'></div>
<script>
$.ajax({
url: "https://cdn.plot.ly/plotly-latest.min.js",
dataType: "script",
cache: true,
success: function () {
runNow();
}
});
// Some data omitted for clarity on screen!
var data = [{
name: "Asia",
text: ["Afghanistan", "Bahrain", "Bangladesh", "Yemen, Rep."],
marker: {
sizemode: "area",
sizeref: 200000,
size: [31889923, 708573, 150448339, 22211743]
},
mode: "markers",
y: [974.5803384, 29796.04834, 1391.253792, 2280.769906],
x: [43.828, 75.635, 64.062, 62.698],
uid: "99da6d"
}, {
name: "Europe",
text: ["Albania", "Austria", "Belgium", "United Kingdom"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [3600523, 8199783, 10392226, 60776238]
},
mode: "markers",
y: [5937.029526, 36126.4927, 33692.60508, 33203.26128],
x: [76.423, 79.829, 79.441, 79.425],
uid: "9d3ba4"
}, {
name: "Oceania",
text: ["Australia", "New Zealand"],
marker: {
sizemode: "area",
sizeref: 200000,
size: [20434176, 4115771]
},
mode: "markers",
y: [34435.36744, 25185.00911],
x: [81.235, 80.204],
uid: "f9fb74"
}];
var layout = {
xaxis: {
title: 'Life Expectancy'
},
yaxis: {
title: 'GDP per Capita',
type: 'log'
},
margin: {
t: 20
},
hovermode: 'closest'
};
var runNow = function () {
Plotly.plot('my-graph', data, layout);
};
</script>
这在 jsfiddle 中确实有效，唯一的区别是我不会将 html 异步加载到 DOM 中。
工作小提琴： https://jsfiddle.net/b2js15nm/ https://jsfiddle.net/b2js15nm/1/
因此！：我无法使用主干和车把来真正重现这种情况。稍后在页面上加载时，看起来 Plotly 的 AMD 不起作用。因此 Plotly 将是未定义的。
【问题讨论】：
-
添加不起作用的代码来摆弄，没有意义的代码：P
-
JavaScript 不在 Backbone 视图中的任何特殊原因？你想做的有点奇怪。
-
该位使用主干和车把加载模板。此视图的内容来自还包括 plotly 的数据库。用户可以创建自己的图表并将其放入仪表板的原因。
标签： javascript jquery backbone.js handlebars.js plotly