Использование TimelineJS и AMD

Я ищу способ использовать TimelineJS с реализацией AMD RequireJS. Я могу частично работать, например.

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

Приведенное выше создает временную шкалу, но storyjs (который экспортирует VMM в моей конфигурации RequireJS) всегда пытается выполнить собственную загрузку библиотек TimelineJS, что неизменно приводит к ошибкам в консоли Firebug/инструментов разработчика.

Я либо ищу способ программно создать объект TimelineJS (примеров которого я не нашел), сказать StoryJS не загружать библиотеки с помощью своего механизма (потому что я их уже предоставил) и в целом интегрировать 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: '_' }
    }
};

amd javascript requirejs timeline.js
person Sean Quinn    schedule 21.11.2013    source источник
comment
Не могли бы вы включить упомянутую вами конфигурацию RequireJS? Поскольку вызов createStoryJS не является квалифицированным, похоже, вы используете глобальные переменные браузера, а не зависимости, загруженные AMD.   -  person kryger    schedule 21.11.2013
comment
@kryger Обновил вопрос с конфигурацией RequireJS. Даже если бы я использовал загруженные AMD зависимости для вызова createStoryJS (например, VMM.createStoryJS(...), и я не уверен, что это вообще работает), будет ли проблема по-прежнему заключаться в том, что StoryJS пытается загрузить библиотеки, используя свой собственный механизм? Спасибо!   -  person Sean Quinn    schedule 21.11.2013
comment
Возможно, я понял, как заставить это работать, не запуская метод createStoryJS(). Как только я буду уверен, я уточню код и опубликую в качестве ответа.   -  person Sean Quinn    schedule 21.11.2013

Ответы (1)


arrow_upward
4
arrow_downward

Потребовалось немного покопаться в исходном коде TimelineJS, чтобы увидеть, что именно createStoryJS на самом деле делает, а затем просмотреть некоторые другие исходные коды, но я наконец ответил на свой вопрос. На самом деле, это относительно просто и очень похоже на мои ранние попытки сделать эту работу, прежде чем опубликовать мой вопрос выше в StackOverflow.

Требуется конфигурация JS:

// 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);
});

Это, по крайней мере, один пример обработки экземпляра TimelineJS с использованием RequireJS/AMD; это также то, как я решил решить свою первоначальную проблему.

person Sean Quinn    schedule 22.11.2013
comment
+1 За то, что показали, как инициализировать временную шкалу без использования createStoryJS. - person Kevin Jurkowski; 20.10.2014