Question

我正在尝试制作一个简单的Backbone Web应用程序。我使用require来管理所有依赖项。我的HTML非常简单：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/todos.css">
    <title>Clinical Auth</title>
    <script type="text/javascript" src="js/lib/require-2.1.1.js" data-main="js/app"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

我的app.js只是一个调用我的application.view.js的路由器：

require([
    'backbone',
    'views/application.view'
  ], function(Backbone, app) {
  var Router = Backbone.Router.extend({
    routes: {
      "": "main"
    },

    main: function(){
      var appView = new app();
      appView.render();
    }
  });

  var router = new Router();
  Backbone.history.start();
});

如您所见，我在路线标题main中启动了我的应用。我的application.view.js也很简单。

define(function(require) {
  "use strict";

   var Backbone = require('backbone');
   var $  = require('jquery');
   var AppView = Backbone.View.extend({
    el:  $('#container'),
    render: function() {
      $(this.el).append("<div>hello world</div>");
      return this;
    }
  });

  return AppView;
});

另外，这是我的require.config文件：

require.config({
  baseUrl: "./js/",
  paths: {
    jquery: 'lib/jquery-1.8.2',
    underscore: 'lib/underscore-1.4.2',
    backbone: 'lib/backbone-0.9.2',
    'backbone.localStorage': 'lib/backbone.localStorage'
  },
  shim: {
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'backbone.localStorage': {
      deps: ['backbone'],
      exports: 'Backbone'
    }
  }
});

当我在主路线中设置断点时，我可以看到container正在被操纵，但它永远不会进入我的屏幕。我究竟做错了什么？我知道这会很简单，但我会把头发拉出来。

Answer 1

此代码没有问题。我有一个css文件，将container元素显示属性设置为none。很抱歉浪费每个人的时间。

主骨干视图未显示

1 个答案: