我正在尝试使用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>
那里没什么特别的。
我的应用程序.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>
我到底做错了什么?
这是由下划线引起的错误。最近,他们一直在打破向后兼容性,而没有真正关心用户......所以像这样的错误开始发生。
解决 方案?- 您可以将下划线恢复为 1.4.3(或更早版本)- 您可以使用master
分支中最新的布局管理器或等待0.9.3版本(即将推出)。(相关问题:https://github.com/tbranyen/backbone.layoutmanager/issues/383)