尝试初始化视图的 Backbone.Layoutmanager 错误答案

【问题标题】：Backbone.Layoutmanager error trying to init view尝试初始化视图的 Backbone.Layoutmanager 错误
【发布时间】：2013-09-12 16:42:46
【问题描述】：

我正在尝试使用 Backbone.Layoutmanager 创建一个主干应用程序。

我遇到了这个毫无帮助的错误

Uncaught TypeError: Object.keys called on non-object

我从一个空的 html 文件开始，我想在其中呈现“appChrome”布局。

<!doctype html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Enrollment Processing</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="styles/main.css">

        <!-- build:js scripts/vendor/modernizr.js -->
        <script src="bower_components/modernizr/modernizr.js"></script>
        <!-- endbuild -->
    </head>

    <body>

        <!-- build:js scripts/vendor.js -->
        <script src="bower_components/jquery/jquery.js"></script>
        <script src="bower_components/underscore/underscore.js"></script>
        <script src="bower_components/backbone/backbone.js"></script>
        <script src="bower_components/layoutmanager/backbone.layoutmanager.js"></script>
        <!-- endbuild -->

        <!-- build:js scripts/app.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/router.js"></script>
        <script src="scripts/templates.js"></script>
        <script src="scripts/views/appChrome.js"></script>
        <!-- endbuild -->
    </body>
</html>

那里没什么特别的。

我的 app.js 也很简单，

/* global enrollmentProcessingApp, $ */

window.enrollmentProcessingApp = {
    Models: {},
    Collections: {},
    Views: {},
    Routers: {},
    init: function () {
        'use strict';

        Backbone.Layout.configure({
            manage: true
        });


        var app = new enrollmentProcessingApp.Routers.AppRouter();

        Backbone.history.start({pushState: true});

    }
};

$(document).ready(function () {
    'use strict';
    enrollmentProcessingApp.init();
});

一些魔法开始在路由器中发生

/*global enrollmentProcessingApp, Backbone*/

enrollmentProcessingApp.Routers = enrollmentProcessingApp.Routers || {};

(function () {
    'use strict';

    enrollmentProcessingApp.Routers.AppRouter = Backbone.Router.extend({
        routes: {
          ''            : 'default_route'
        },

        initialize: function(){
            appChrome = new enrollmentProcessingApp.Views.AppChromeView();

        },

        default_route: function(){
            console.log("default route called");
        }
    });

})();

初始化函数中的那一行引发了错误。

appChrome = new enrollmentProcessingApp.Views.AppChromeView();

这是 AppChromeView 视图。同样非常简单。

/*global enrollmentProcessingApp, Backbone, JST*/

enrollmentProcessingApp.Views = enrollmentProcessingApp.Views || {};

(function () {
    'use strict';

    enrollmentProcessingApp.Views.AppChromeView = Backbone.View.extend({

        template: JST['app/scripts/templates/appChrome.ejs']

    });

})();

如您所见，我正在使用 JST。那个模板也超级简单。

<p>Hello World</p>

我到底做错了什么？

【问题讨论】：

Simon 的回答是否为您解决了问题？如果我们能解决这个问题，那就太好了。
@tbranyen 我最终放弃了布局管理器并选择了 Marionette，所以我不知道这是否能回答这个问题。我应该以某种方式标记这个问题吗？
我认为这个问题已在 Underscore#1.6.0 中修复。我遇到了同样的问题，并从 1.5.3 升级。到 1.6.0。

标签： javascript backbone.js backbone-views backbone-layout-manager

【解决方案1】：

这是由下划线引起的错误。最近他们一直在破坏向后兼容性而没有真正关心用户......所以像这样的错误开始发生。

解决方案？ - 您可以将下划线恢复到 1.4.3（或更早版本） - 您可以使用来自master 分支的最新 LayoutManager 或等待发布 0.9.3（即将推出）。（相关问题：https://github.com/tbranyen/backbone.layoutmanager/issues/383）

【讨论】：

我认为这个问题已在 Underscore#1.6.0 中修复