如何在ember-cli中包含timelineJS

时间:2014-09-17 21:22:54

标签: ember.js ember-cli timeline.js

我可以使用以下方法添加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页面中手动添加它来解决我的问题。

0 个答案:

没有答案