查看loading在主版面加载之前

Question

这是来自Backbone boilerplate: "this.model is undefined"的后续问题。我能够制定出一些结构，但遇到了一个新问题。我正在使用骨干样板，它使用layoutManager适配器来设置视图。其主要观点，以及随后的第一种观点，似乎是正确加载所有的资产，但在随后的观点似乎前主视图中被加载到被烧成这里是我的路由器文件：

define([ 
    // Application. 
    "app", 

    //Modules 
    "modules/homepage" 
], 
    function (app, Homepage) { 
     "use strict"; 

     // Defining the application router, you can attach sub routers here. 
     var Router = Backbone.Router.extend({ 
      initialize: function(){ 
       var collections = { 
        homepage: new Homepage.Collection() 
       }; 

       _.extend(this, collections); 

       app.useLayout("main-frame").setViews({ 
        ".homepage": new Homepage.Views.Index(collections) 
       }).render(); 
      }, 

      routes:{ 
       "":"index" 
      }, 

      index: function() { 
       this.reset(); 
      }, 

      // Shortcut for building a url. 
      go: function() { 
       return this.navigate(_.toArray(arguments).join("/"), true); 
      }, 

      reset: function() { 
       // Reset collections to initial state. 
       if (this.homepage) { 
        this.homepage.reset(); 
       } 

       // Reset active model. 
       app.active = false; 
      } 

     }); 

     return Router; 
    } 
); 

这是我的模块：

define([ 
    "app", 
    ["localStorage"] 
], 
function(app){ 
    "use strict"; 

    var Homepage = app.module(); 

    Homepage.Model = Backbone.Model.extend({ 

     defaults: function(){ 
      return { 
       homepage: {} 
      }; 
     } 
    }); 

    Homepage.Collection = Backbone.Collection.extend({ 
     //localStorage: new Backbone.LocalStorage("Homepage.Collection"), 

     refreshFromServer: function() { 
      return Backbone.ajaxSync('read', this).done(function(data){ 
       console.log(data); 
       //save the data somehow? 
      }); 
     }, 

     /*model: Homepage.Model,*/ 

     cache: true, 

     url: '/app/json/test.json', 

     initialize: function(options){ 
      if (options) { 
       this.homepage = options.homepage; 
      }else{ 
       //this.refreshFromServer(); 
      } 
     } 
    }); 

    Homepage.Views.Index = Backbone.View.extend({ 
     template: "homepage", 
     el: '#mainContent', 

     serialize: function() { 
      return { 
       collection: this.options.homepage 
      }; 
     }, 

     initialize: function(){ 
      this.listenTo(this.options.homepage,{ 
       "reset": this.render, 
       "fetch": function(){ 
        $(this.el).html("Loading..."); 
       } 
      }); 

     } 
    }); 

    return Homepage; 
}); 

正如你所看到的，“主框架”模板是被加载到页面的主模板。我希望之后加载主页模板，并将其填充到ID“#mainContent”中。在这种情况下，“#mainContent”还不存在，所以主页模板不会在任何地方加载。

Answer 1

多的努力后，我决定从骨干网，样板，离开现在使用骨干/ RequireJS/localStorage的适配器具有以下设置：

app.js：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'router' // Request router.js 
], function($, _, Backbone, Router){ 
    var initialize = function(){ 
     Router.initialize(); 
    }; 

    return { 
     initialize: initialize 
    }; 
}); 

main.js：

require.config({ 
    paths: { 
     jquery: 'libs/jquery', 
     underscore: 'libs/underscore', 
     backbone: 'libs/backbone', 
     'backbone.localStorage': 'libs/backbone.localStorage', 
     templates: 'templates' 
    }, 
    shim: { 
     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: ['underscore','jquery'], 
      exports: 'Backbone' 
     }, 
     'backbone.localStorage': { 
      deps: ['backbone'], 
      exports: 'Backbone' 
     } 
    } 
}); 

require([ 
    'app' 

], function(App){ 
    App.initialize(); 
}); 

router.js：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 

    //Modules 
    "modules/homepage" 
], 
    function ($, _, Backbone, Homepage) { 
     "use strict"; 

     // Defining the application router, you can attach sub routers here. 
     var Router = Backbone.Router.extend({ 
      routes:{ 
       "":"index" 
      } 
     }); 

     var initialize = function(){ 

      var app_router = new Router; 

      app_router.on('route:index', function(){ 
       // Call render on the module we loaded in via the dependency array 
       var collection = new Homepage.Collection(); 
       var homepage; 
       collection.fetch({ 
        success: function(){ 
         if(collection.length === 0){ 
          console.log('refreshing from server...'); 
          collection.refreshFromServer({ 
           success: function(data){ 
            collection.add(data); 
            collection.invoke('save'); 
            homepage = new Homepage.Views.Index({ 
             collection: collection 
            }).render(); 
           } 
          }) 
         }else{ 
          console.log('already loaded in localStorage...'); 
          homepage = new Homepage.Views.Index({ 
           collection: collection 
          }).render(); 
         } 
        } 
       }); 

      }); 

      Backbone.history.start(); 
     }; 
     return { 
      initialize: initialize 
     }; 
    } 
); 

homepage.js：

define([ 
    "jquery", 
    "underscore", 
    "backbone", 
    "backbone.localStorage", 
    "text!templates/homepage.html" 
], 
function($, _, Backbone, localStorage, homepageTemplate){ 
    "use strict"; 

    var Homepage = { Views: {} }; 

    Homepage.Model = Backbone.Model.extend({ 

     defaults: function(){ 
      return { 
       homepageData: {} 
      }; 
     } 
    }); 

    Homepage.Collection = Backbone.Collection.extend({ 
     localStorage: new Backbone.LocalStorage("RGPData"), 

     refreshFromServer: function(options) { 
      return Backbone.ajaxSync('read', this, options); 
     }, 

     url: 'json/test.json', 

     model: Homepage.Model 
    }); 

    Homepage.Views.Index = Backbone.View.extend({ 
     template:"homepage", 
     el: '#mainContent', 

     initialize: function(){ 
      this.listenTo(this.collection, 'change', this.render); 
      this.listenTo(this.collection, 'destroy', this.remove); 
     }, 

     render: function(){ 
      console.log('rendering...'); 
      $(this.el).html(homepageTemplate, this.collection); 
      return this; 
     } 
    }); 

    return Homepage; 
}); 

这种工作方式，我有应用程序使用localStorage的适配器，而我的收藏中有一个 “refreshFromServer” 从JSON阅读文件，如果localStorage是空的。在插入视图之前，该集合在路由器中获取。

对于我来说，这已经有相当长的一段时间了，我希望能够发现一切正常，所以希望这个答案能够帮助其他任何人的脚步比我更好。

几个笔记，我使用text.js为了引入模板。

另一个说明，我试图包括backbone.localStorage和返回只是'骨干'（如http://kilon.org/blog/2012/08/build-backbone-apps-using-requirejs/所示），但由于某种原因，没有工作，我的homepage.js文件一直说“Backbone.Model不是定义”。所以我最终将这两个都包含在了定义中。

Answer 2

这看起来不正确：

define([ // <- first bracket 
    "app", 
    ["localStorage"] // <- second bracket 
], 
function(app){ 
... 

难道它是如何在你的代码，或者一些复制粘贴侥幸？