StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackbone boilerplate: "this.model is undefined"
text
Body
copied!<p>I'm a backbone newbie, so I'm sort of fumbling on getting an app set up. I'm using the backbone-boilerplate (<a href="https://github.com/tbranyen/backbone-boilerplate" rel="nofollow">https://github.com/tbranyen/backbone-boilerplate</a>) and github-viewer (<a href="https://github.com/tbranyen/github-viewer" rel="nofollow">https://github.com/tbranyen/github-viewer</a>) as a reference, though when running I seem to be getting a "this.model is undefined". </p> <p>Here is my current router.js:</p> <pre><code>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(); this.homepage.fetch(); }, // Shortcut for building a url. go: function() { return this.navigate(_.toArray(arguments).join("/"), true); }, reset: function() { // Reset collections to initial state. if (this.homepage.length) { this.homepage.reset(); } // Reset active model. app.active = false; } }); return Router; } ); </code></pre> <p>And my homepage.js module:</p> <pre><code>define([ "app" ], function(app){ "use strict"; var Homepage = app.module(); Homepage.Model = Backbone.Model.extend({ defaults: function(){ return { homepage: {} }; } }); Homepage.Collection = Backbone.Collection.extend({ model: Homepage.Model, cache: true, url: '/app/json/test.json', initialize: function(models, options){ if (options) { this.homepage = options.homepage; } } }); Homepage.Views.Index = Backbone.View.extend({ template: "homepage", el: '#mainContent', render: function(){ var tmpl = _.template(this.template); $(this.el).html(tmpl(this.model.toJSON())); return this; }, initialize: function(){ this.listenTo(this.options.homepage, { "reset": function(){ this.render(); }, "fetch": function() { $(this.el).html("Loading..."); } }); } }); return Homepage; }); </code></pre> <p>Thanks in advance for the help!</p> <p><strong>Update:</strong> After much googling (you should see how many tabs I have open), I <em>think</em> I made a little bit of headway, but still no luck. I updated my router to have the following:</p> <pre><code>app.useLayout("main-frame").setViews({ ".homepage": new Homepage.Views.Index() }).render(); </code></pre> <p>I made a number of modifications to my homepage.js module to now look like this:</p> <pre><code>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', initialize: function(){ var self = this; this.collection = new Homepage.Collection(); this.collection.fetch().done( function(){ self.render(); }); }, render: function(){ var data = this.collection; if (typeof(data) === "undefined") { $(this.el).html("Loading..."); } else { $(this.el).html(_.template(this.template, data.toJSON())); } return this; } }); return Homepage; }); </code></pre> <p>As you can see, I have localStorage code but commented out for now because I just want to get everything working first. The ultimate goal is to have an initial call that loads data from a JSON file, then continues afterwards using localStorage. The app will later submit data after the user does a number of interactions with my app. </p> <p>I am getting the main view to load, though the homepage module isn't populating the #mainContent container in the main view. </p> <p>I did all of the googling that I could but frustrated that it's just not sinking in for me. Thanks again for looking at this and any feedback is appreciated!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload