Question

我正在寻找一种方法来使用TimeJJ和RequireJS的AMD实现。我可以让事情部分起作用，例如

define(["storyjs", "timelinejs", ...], function(storyjs, timelinejs, ...) {
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     { ... }, // sample JSON
        embed_id:   'timeline-embed'
    });
});

上面会生成一个时间轴，但是storyjs（在我的RequireJS配置中导出VMM）总是尝试执行自己的TimelineJS库加载，这总是会在Firebug /开发人员工具中产生错误控制台。

我正在寻找一种以编程方式构建TimelineJS对象的方法（我找不到任何示例），告诉StoryJS不要使用其机制加载libs（因为我已经提供了它们）并且通用将TimelineJS与AMD解决方案集成在一起。

有什么建议吗？

更新

使用RequireJS配置，如下所示。对于我自己的个人用途，我倾向于重命名JS库并附加他们的版本号。

var require = {
    waitSeconds: 5,
    paths: {
        "app": "../js/app"

        // ** Libraries
        ,"backbone": "../js/lib/backbone-1.1.0.min"
        ,"bootstrap": "../js/lib/bootstrap-3.0.2.min"
        ,"jquery": "../js/lib/jquery-1.10.2.min"
        ,"jquery-ui": "../js/lib/jquery-ui-1.10.3.min"
        ,"json2": "../js/lib/json2"
        ,"underscore": "../js/lib/underscore-1.5.2.min"

        // ** TimelineJS
        ,"storyjs": "../js/lib/storyjs-embed-2.0.3.min"
        ,"timelinejs": "../js/lib/timeline-2.26.3.min"

        // ** RequireJS Plugins
        ,"domready": "../js/lib/plugins/requirejs/requirejs-plugin-domready-2.0.1"
        ,"i18n": "../js/lib/plugins/requirejs/requirejs-plugin-i18n-2.0.4"
        ,"text": "../js/lib/plugins/requirejs/requirejs-plugin-text-2.0.10"
    },

    shim: {
        'backbone': { deps: ['underscore'], exports: 'Backbone' }
        ,'bootstrap': { deps: ['jquery'] }
        ,'jquery': { exports: '$' }
        ,'json2': { exports: 'JSON' }
        ,'storyjs': { exports: 'VMM' }
        ,'timelinejs': { deps: ['storyjs'] }
        ,'underscore': { exports: '_' }
    }
};

Answer 1

稍微深入了解一下TimelineJS源代码，看看究竟createStoryJS究竟在做什么，然后查看其他一些源代码，但我终于回答了我自己的问题。事实上，它是相对简单的，与我在将上述问题发布到StackOverflow之前完成这项工作的早期尝试非常相似。

RequireJS配置：

// RequireJS config
var require = {
  waitSeconds: 5,
  paths: {
    ...

    // ** TimelineJS
    ,"storyjs": "../js/lib/plugins/jquery/storyjs-embed-2.0.3.min"
    ,"timelinejs": "../js/lib/plugins/jquery/timeline-2.26.3.min"

    ...
  },
  shim: {
    ...
    ,'storyjs': { deps: ['jquery'], exports: 'VMM' }
    ,'timelinejs': { deps: ['jquery', 'storyjs'] }
    ...
  }
};

模块实例化TimelineJS对象：

define([ "json2", "timelinejs"], function(JSON, timelinejs) {
  var js_version = "2.24",
    config = {
      version: "2.24", // DEFAULT: 2.x
      debug:   true,
      type:    'timeline',
      source:  {...} // Sample JSON
  };
  var timeline = new VMM.Timeline("timeline-embed", 800, 600);
  timeline.init(config);
});

这至少是使用RequireJS / AMD处理TimelineJS实例化的一个例子;这也是我决定解决原始问题的方法。

使用TimelineJS和AMD

1 个答案:

RequireJS配置：

模块实例化TimelineJS对象：