Ошибка «Объект не является функцией» при попытке создать экземпляр приложения Marionette с помощью requirejs

Это моя первая попытка использовать Marionette. Я пытаюсь создать приложение Marionette в качестве модуля requirejs. Я следил за статьей «Использование Marionette with Require js» на вики Marionette.js: —

https://github.com/marionettejs/backbone.marionette/wiki/Использование-марионетки-с-требованием

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

Вот мой index.html: -

<!DOCTYPE html>
<html>
<head>
    <title>Marionette Structure and Require AMD Proto</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="nav">

</div>
<div id="mainContent">

</div>
<script language="javascript">
    // convenience function, because console.log throws errors and crashes IE
    // this way you don't need to all logs to test in IE
    function trace(msg){
        try{
            console.log(msg);
        }catch(e){
            // suppressed error
        }
    }
</script>
<script src="js/lib/require.js" data-main="app.js"></script>
</body>
</html>

Вот мой app.js: -

require.config({
    paths : {
        backbone : 'js/lib/backbone',
        underscore : 'js/lib/underscore',
        jquery : 'js/lib/jquery',
        marionette : 'js/lib/backbone.marionette'
    },
    shim : {
        jquery : {
            exports : 'jQuery'
        },
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['jquery', 'underscore'],
            exports : 'Backbone'
        },
        marionette : {
            deps : ['jquery', 'underscore', 'backbone'],
            exports : 'Marionette'
        }
    }
})

require(
    ["jquery",
        "underscore",
        "backbone",
        "marionette",
        "js/shell/shellapp"
    ],
    function($, _, Backbone, Marionette, ShellApp) {
        $(function() {
           new ShellApp();
            trace("ShellApp: "+ShellApp);
        });
    }
);

И, наконец, вот мой shellapp.js: -

define( ["marionette"], function (Marionette) {

    // set up the app instance
    var ShellApp = new Marionette.Application();

    // configuration, setting up regions, etc ...
    ShellApp.addRegions({
        nav: '#nav',
        main: '#mainContent'
    });
    ShellApp.on('initialize:after', function(){
        trace("initialize:after");
    });
    // export the app from this module
    return ShellApp;
});

Соедините все это вместе, и я получаю «Uncaught TypeError: object is not a function» в строке 42 app.js.

Большое спасибо всем, кто добрался до этого места!

Сэм


javascript requirejs backbone.js marionette
person SamBrick    schedule 11.04.2013    source источник
comment
Я не знаю Marionette, но похоже, что вы экспортируете объект (return ShellApp;), а затем пытаетесь создать его заново, как функцию-конструктор, при импорте (new ShellApp();).   -  person c24w    schedule 11.04.2013
comment
Спасибо c24w, это то, что я пытался сделать (хотя, возможно, мне это и не нужно...). Я следил за учебником, и именно здесь я подумал, что могу или должен был создать экземпляр нового ShellApp() после его импорта. Вроде и не надо.... но почему в туториале так?   -  person SamBrick    schedule 11.04.2013

Ответы (1)


arrow_upward
3
arrow_downward

Мой ответ стал слишком длинным для комментария!

Вы экспортируете сконструированный объект, а не сам конструктор:

var ShellApp = new Marionette.Application()
...
return ShellApp;

это именно то, что импортируется, поэтому вам не нужно создавать еще один new.

Во-первых, я бы переименовал ShellApp в shellApp для обозначения экземпляра, а не конструктора (что является общепринятым соглашением об именах). Я думаю, что в учебнике вводит в заблуждение то, что они нарушают это соглашение:

MyApp = new Backbone.Marionette.Application();

(при условии, что я на правильном пути здесь).

Теперь я предполагаю, что вы просто передаете этот единственный экземпляр Marionette.Application на все время существования вашего приложения.

В руководстве это показывает экспорт newed-up Marionette.Application (то же, что и вы), но не показывает, как он фактически используется при импорте. После импорта объекта вы можете получить доступ к его свойствам, таким как:

shellApp.addInitializer(function(options){
    // stuff
});

Подробнее здесь .

person c24w    schedule 11.04.2013