Невозможно создать базовый вид - PullRequest
Новая
       1

Невозможно создать базовый вид

3 голосов
/ 09 ноября 2011

Я постоянно получаю index.js:7 Uncaught TypeError: Cannot read property 'View' of null, что означает, что Backbone не загружается / не присутствует, однако, когда я просматриваю загруженные ресурсы на странице, присутствует backbone-min.js.

Поскольку ошибок 404 нет, я думаю, что проблема связана с самим сценарием. Кто-нибудь видит какие-либо проблемы со сценарием ниже?

ПРИМЕЧАНИЕ: Для удобства я загрузил свой код здесь . Zip-файл содержит все соответствующие файлы JS. Если вы прокрутите до конца веб-страницы, вы должны увидеть скачать ", как только вы нажмете на нее, вам будет предложено ввести код с картинки После ввода кода актуальная кнопка загрузки (под кнопкой «медленная загрузка») появится через несколько секунд.

Просмотр: index.js 

define([
        "jQuery",
        "Underscore",
        "Backbone"
        // I've tried using the modules above as well as direct loading using order! as seen in the following lines.
        //"order!libs/jquery/jquery-min",
        //"order!libs/underscore/underscore-min",
        //"order!libs/backbone/backbone-min",
        ], 
        function($, _, Backbone){
            console.log(_) // prints "undefined"
            console.log(Backbone) // prints Object
            var IndexView = Backbone.View.extend({ // At this line I now get: Uncaught TypeError: Cannot call method 'extend' of undefined
                render: function(){
                    $(this.el).html("<h1>Welcome Dan!</h1>");
                    $("body").html(this.el);
                }
            });
            return new IndexView();
        });

Ответы [ 2 ]

5 голосов
/ 12 ноября 2011

Таким образом, ключ к этой проблеме - изменения в underscore.js.В частности тот факт, что теперь он поддерживает AMD (определение асинхронного модуля).Тот факт, что подчеркивание больше не присоединяется к глобальному пространству имен при обнаружении require, нарушает схему, используемую для разрешения стандартного асинхронного синтаксиса require, но все же поддерживает синхронную загрузку.

Теперь, когда JQuery, Underscore & Backbone (0.5.3 не регистрирует себя, вам нужно a ) поддерживать асинхронную загрузку, вы можете отказаться от этих взломанных библиотек в пользу стандартных и требовать имена, с которыми эти библиотеки регистрируются сами.Как это:

Main.js 

require.config({
    baseUrl: "js",
    paths: { 
               jquery: "libs/jquery/jquery",
               underscore: "libs/underscore/underscore",
               backbone: "libs/backbone/backbone"
           },
    waitSeconds: 10
});

require([
        "app"
        ],
        function(App){
            App.initialize();
            console.log("Main initialized...");
        });

index.js 

define([
    "jquery",
    "underscore",
    "backbone"
    ], 
    function($, _, Backbone){
        console.log(_);
        console.log(Backbone);
        var IndexView = Backbone.View.extend({
            render: function(){
                var username = getCookie("username");
                var data = {username: username};
                var compiled = _.template("<h1>Welcome <%= username %></h1>", data);
                $(this.el).html(compiled);
                $("#lt-col").html(this.el);
            }
        });
        return new IndexView();
    });

Другие определения были изменены, чтобы отразить новые псевдонимы нижнего регистра.

Извлечь фиксированный код здесь

1 голос
/ 09 ноября 2011

Несмотря на то, что Backbone 0.5.3 регистрируется как модуль AMD, он ничего не возвращает. (То же самое для подчеркивания) Если вы измените свою строку: 

function($, _, Backbone){

Для 

function($){

Это будет работать. Для более точного решения requirejs-ish создайте модуль для магистрали, который выглядит следующим образом: 

define(
[
    'order!libraries/underscore',
    'order!libraries/backbone.0.5.3'
],
function () {
    return Backbone;
}
);

- ОБНОВЛЕНИЕ - дополнительная информация 

<head>
<title>Index2</title>
<script src="../../scripts/libraries/require.js" type="text/javascript"></script>
<script type="text/javascript"">
require({
baseUrl: 'scripts'
}, [
'order!libraries/jquery',
'order!libraries/underscore',
'order!libraries/backbone.0.5.3'
], function ($) {
console.log(Backbone);
});
</script>
</head>
...