Backbone.js & require.js: как мне преобразовать мои модели, представления и коллекции в модули require.js?

Ответ 1

Ключ к пониманию требует (по крайней мере, в моем маленьком мозге) помнить, что то, что вы возвращаете из функции, будет доступно для других модулей, которые втягивают (или требуют) этот модуль. Итак, в приведенном ниже коде мне нужен jquery и позвоночник (jquery - это особый случай, обрабатываемый "require-jquery" ). Когда эти 2 доступны, он вызовет мою функцию, и эта функция вернет созданный конструктор вида.

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});

Тогда вы можете написать что-то подобное на своей странице. Обратите внимание, что jquery является первым обязательным элементом в массиве. Это соответствует первому параметру в моей функции. Вид 2, а модель 3. Затем я могу использовать возвращаемое значение из моего кода "define", который является конструктором.

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});

Надеюсь, это полезно... Мы любили Магистраль и Требовали:)

Ответ 2

У меня закончилось свободное пространство в комментариях и я хотел включить некоторый код, поэтому я делаю второй ответ:

То, что @timDunham опубликовано, по большей части довольно неплохое, хотя у меня есть несколько дополнительных функций, которые кто-то может прослушивать для дальнейшего понимания.

В коде:

define([    
    'jquery'
    'libraries/backbone'
]

Я считаю, что Underscore отсутствует. Во-первых, Backbone нуждается в Underscore, чтобы работать, и без него я думаю, что это сломается. Во-вторых, если вы не используете вилку AMDJS поддерева и подставку, они не поддерживают AMD. Подчеркивание REMOVED AMD поддерживается с v1.3.0. Если мы предположим, что мы используем подчеркивание и основу не-AMD, они, вероятно, не относятся к define[] и должны быть require[].

Таким образом, правильное определение будет выглядеть примерно так, если вы правильно используете версии AMDJS:

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

Это предполагает, что я создал пути в конфигурации require:

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

Я видел некоторые реализации, которые не используют версии AMDJS, и дело в том, что, поскольку они не являются асинхронными модулями, вы должны убедиться, что они загружены в правильном порядке.

Я считаю, что это НЕ гарантирует правильный порядок загрузки зависимостей:

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

Потому что что-то указано как зависимость, не означает, что он будет загружаться по мере необходимости. С асинхронными модулями это не проблема, но в этом примере я не видел упоминания, поэтому мы предположим, что они не AMD. Этот модуль DEPENDS на jquery, movieRow, фильме и позвоночнике. Но если хост пытается загрузить до jquery... (x_x) Почему мир почему?

Вот почему я считаю, что require.js имеет плагин под названием order! в помощь. С заказом! вы можете настроить свои зависимости и загружать скрипты в... ну... порядке. Что-то вроде этого:

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

Я верю в это, ваш модуль будет оценивать и гарантировать, что jquery будет загружен первым, а затем подчеркнуть, а затем позвоночник. Нет гарантий для фильма или фильма, хотя в этом случае кому это нужно?: -)

Я использую AMDJS-Backbone и AMDJS-Underscore для моего проекта, поэтому я обычно помещаю их в define[], и он работает без сбоев. RequireJS действительно потрясающий и значительно очистил мой код. Куда бы я ни пошел JRBurke, писатель RequireJS всплывает повсюду, и он всегда супер пупер полезен с его комментариями ко всему, что касается require.js. И я имею в виду все. Моя теория заключается в том, что он телепатически связан с Требованием, и в любое время в Интернете возникает новый экземпляр requirejs, он имеет непосредственный доступ к этим знаниям. Готов поспорить, что, если обсуждение этого потока продолжится, он тоже появится здесь, чтобы поздороваться.

Мое выражение об отказе от ответственности заключается в том, что я также новичок в Требовании, и я мог бы не понимать вещи. Но из того, что я знаю, я думал, что эти дополнительные указатели и информация могут помочь людям собрать лучший код, используя require.

ЛИТЕРАТУРЫ:

• https://github.com/amdjs/underscore
• https://github.com/amdjs/backbone
• http://requirejs.org/docs/api.html#order