Search code examples
javascriptbackbone.jsparse-platformsdkunderscore.js

Parse.View.extend - "cannot read property 'extend' of undefined"

Currently using the Parse JavaScript SDK for a web app, but I'm also new to Backbone, and since this particular problem is in functionality that Parse copied over from Backbone, I'm not sure exactly where I'm making my mistake.

I have index.html, with this basic structure & script template tag (to be used by _underscore):

<div id="my-app">        

</div>
<script type="text/template" id="album-header-template">
    <div id="some-id">
          Some Content
    </div>
</script>

At the end of <body>, the following script tags, to take care of Parse dependencies, load Parse, & use my own JS file:

<script src="libraries/node_modules/jquery/dist/jquery.min.js"></script>
<script src="libraries/node_modules/underscore/underscore-min.js"></script>
<script src="libraries/node_modules/parse/dist/parse-latest.min.js"></script>
<script src="app/ParseApp.js"></script>

Then in ParseApp.js, where I am trying to get off the ground by creating simple objects and views, I have the following:

$(function () {
    var Album = Parse.Object.extend("Album",{
            // Default attributes for the album
            defaults: {
              name: "Album Title"
            },

            // Ensure that each album created has a title
            initialize: function() {
              if (!this.get("name")) {
                this.set({"name": this.defaults.content});
              }
            },
        });

    var HomeView = Parse.View.extend({
        el: $("#my-app"),

        initialize: function() {
            console.log("new instance of HomeView");
            this.render();
        },

        render: function() {
            this.$el.html(_.template($("#album-header-template").html()));
        }
    });

    new HomeView;
});

When I run index.html in the browser, I get the following error in console: Uncaught TypeError: Cannot read property 'extend' of undefined (occurring at the var Home View = Parse.View.extend line).

Originally, I had thought this might be because Parse wasn't initiated in time for ParseApp.js to use it, based on my scripts loading. However, I ran the recommended "Test the SDK" script from Parse, and it's indeed initialized (in addition, adding an object with var Album works fine). So I'm really stuck on what's causing either HomeView or Parse.View to be "undefined".

Likely a straightforward answer that I'm overlooking, but any help would be greatly appreciated, and I could provide full files if need be.

Solution

  • Not a very satisfying answer, but thanks to the help from @Yura & @Daniel Blank, discovered that the error was resulting because the most recent versions of the Parse SDK (everything after 1.6.0) no longer include full Backbone functionality. This includes the version I had been using locally from npm.

    The best explanation of the Parse SDK direction is in the link given above, and there seem to be three options, for those hoping to continue using Parse and/or Backbone:

    1. Use an old version (1.5.0 being the most recent that includes Backbone functionality) in order to maintain your Backbone functions, such as Parse.Collection or Parse.Router.
    2. Try going Parse SDK-agnostic, while continuing to use Backbone. Can use the basic Parse REST API, or try one of the GitHub projects attempting to do that linking for you.
    3. Give up on Backbone going forward, and use Parse with VanillaJS, or perhaps switch over to React (which is obviously the direction Facebook would want Parse to head)

    I'm too inexperienced to recommend one of the three, although #1 seems the easiest, while #3 seems far and away the most maintainable. Still trying to make my own decision, but that's outside the scope of my original question. Thanks for the help, everyone.