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

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

17 голосов
/ 08 сентября 2011

Я работаю над приложением javascript с backbone.js, в котором говорится, что для простоты разработки я теперь структурирую свои файлы следующим образом 

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js

, которые представляют собой множество файлов javascript для отправки на серверПользователь, я вижу некоторое гудение о labjs или require.js и решил проверить его.но я понятия не имею, как бы я переписал все свои базовые модели или представления в эти модули require.js.

любая помощь в правильном направлении была бы хороша.

Ответы [ 2 ]

20 голосов
/ 08 сентября 2011

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

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

Надеюсь, это полезно ... Мы любили Backbone и Require:)

4 голосов
/ 29 марта 2012

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

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

В коде: 

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

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

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

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

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

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.Этот модуль ЗАВИСИТ от jquery, movieRow, movie и backbone.Но если backbone пытается загрузить до 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.И я имею в виду все.Моя теория заключается в том, что он телепатически связан с Require, и каждый раз, когда в сети появляется новый экземпляр requirejs, он получает немедленный доступ к этим знаниям.Могу поспорить, что если эта дискуссия продолжится, он появится здесь, чтобы также поздороваться.

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

Ссылки:

...