我可以使用以下方法添加timelineJs库:
bower install timeline
在我的Brocfile.js中,我有
app.import("bower_components/timeline/js/timeline-min.js");
app.import("bower_components/timeline/js/storyjs-embed.js");
app.import("bower_components/timeline/css/timeline.css");
在我初始化时间轴的组件中,我有:
import Ember from "ember";
export
default Ember.Component.extend({
layout: Ember.Handlebars.compile('<div id="timeline-overview"></div>'),
didInsertElement: function() {
var sourceData = {
"timeline": {
"headline": "The Main Timeline Headline Goes here",
"type": "default",
"text": "<p>Intro body text goes here, some HTML is ok</p>",
"asset": {
"media": "http://yourdomain_or_socialmedialink_goes_here.jpg",
"credit": "Credit Name Goes Here",
"caption": "Caption text goes here"
},
"date": [{
"startDate": "2011,12,10",
"endDate": "2011,12,11",
"headline": "Headline Goes Here",
"text": "<p>Body text goes here, some HTML is OK</p>",
"tag": "This is Optional",
"classname": "optionaluniqueclassnamecanbeaddedhere",
"asset": {
"media": "http://twitter.com/ArjunaSoriano/status/164181156147900416",
"thumbnail": "optional-32x32px.jpg",
"credit": "Credit Name Goes Here",
"caption": "Caption text goes here"
}
}],
"era": [{
"startDate": "2011,12,10",
"endDate": "2011,12,11",
"headline": "Headline Goes Here",
"text": "<p>Body text goes here, some HTML is OK</p>",
"tag": "This is Optional"
}
]
}
};
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: sourceData,
embed_id: 'timeline-overview'
});
}
});
我遇到了一堆像这样的js问题:
"NetworkError: 404 Not Found - http://localhost:4200/css/timeline.css?2.24"
"NetworkError: 404 Not Found - http://localhost:4200/js/timeline-min.js?2.24"
"NetworkError: 404 Not Found - http://localhost:4200/assets/loading.gif?v3.4"
我不确定如何解决这些问题。似乎时间轴试图在运行时注入一些javascript,并且它希望文件位于某个特定的文件夹中。我对bower配置和ember cli很新,所以任何指针都非常有价值。感谢。
更新 我能够通过在公共文件夹中添加库然后在index.html页面中手动添加它来解决我的问题。