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

StackOverflow https://stackoverflow.com/questions/7353151

Вопрос

Я работаю над приложением 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 и решил проверить с ним. Но я понятия не имею, как я бы переписывал все свои модели или взгляды на эти модули.

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

Это было полезно?

Решение

Ключом к пониманию требуется (по крайней мере, в моем маленьком мозге) является помнить, что то, что вы возвращаете из функции, будет доступно для других модулей, которые втягиваются (или требуют) этого модуля. Таким образом, в приведенном ниже коде мне нужны jQuery и Backbone (JQuery-это особый случай, обработанный «Tress-Jquery»). Когда эти 2 будут доступны, это позвонит моей функции, и эта функция вернет конструктор представления, который я создал.

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

                return this;
            }
        });

        return MovieRow;
});

Тогда вы можете написать что -то подобное на свою страницу. Обратите внимание, что jQuery является первым необходимым предметом в массиве. Это соответствует первому параметру в моей функции. Вид 2 -й, а модель - 3 -я. Затем я могу использовать возвращаемое значение из моего «определить» кода выше, который является конструктором.

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

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

Другие советы

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

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

В коде:

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

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

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

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

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

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 и Mancebone. Но если магистраль пытается загрузить до jQuery ... (x_x) Почему мир зачем?

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

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

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

Я использую вилки Amdjs-Backbone и Amdjs-underscore для своего проекта, поэтому я обычно помещаю их в define[] И это работает без зацепления. Требование действительно потрясающе и значительно вычистила мой код. Куда бы я ни пошел, jrburke, писатель «Восстания», появляется повсюду, и он всегда очень полезен с его комментариями ко всему, что касается require.js. И я имею в виду все. Моя теория заключается в том, что он телепатически связан с требованием, и в любое время, когда в Интернете возникает новый экземпляр requirejs, он имеет немедленный доступ к этим знаниям. Бьюсь об заклад, если это обсуждение темы продолжается, он также появится здесь, чтобы поздороваться.

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

ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА:

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top