My Backbone.js application throws a JSON.Parse SyntaxError on page load

Question

I'm trying to replace an existing web application with a brand spanking new interface written in Backbone.js. Eventually, this will be awesome, because the application is backed by a restful API written with Python + CherryPy and hates to have its host page refreshed.

My first step was to attempt to throw together a little Backbone.js proof of concept using the various tutorials that are floating about the 'net. Here's what I came up with:

<!DOCTYPE html>
<html>
<head>
    <script type="application/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
    <script type="application/javascript" src="/static/js/underscore-min.js"></script>
    <script type="application/javascript" src="/static/js/json.js"></script>
    <script type="application/javascript" src="/static/js/ICanHaz.min.js"></script>
    <script type="application/javascript" src="/static/js/backbone.js-0.9.9-min.js"></script>

    <script type="application/javascript">
        $(function() {
            //logical model of a user
            var User = Backbone.Model.extend({});

            //visual representation of a user
            var CurrentUserView = Backbone.View.extend({
                render: function() {
                    this.el = ich.user(this.model.toJSON());
                    return this;
                }
            })

            //create a user and drop its representation into the DOM
            var currentUser = new User({username: "hello world"});
            var view = new CurrentUserView({model: currentUser});
            $('.content').append(view.el.render());
        });
    </script>
</head>
<body>
    <div class='content'>
        <p>The user representation should show up below this paragraph</p>
    </div>

    <!--ICanHaz user template -->
    <script id="user" type="text/html">
        <ul class="user">
            <li><a href="#">{{ username }}</a></li>
            <li><a href="#" id="logout">logout</a></li>
        </ul>
    </script>
</body>
</html>

Unfortunately, when I load this page in Firefox, the user representation does not show up inside of the .content div, and the error message SyntaxError: JSON.parse: unexpected character shows up in the web console.

The issue seems to be related to the CurrentUserView because the following code does exactly what I want:

$(function() {
    //logical model of a user
    var User = Backbone.Model.extend({});

    //create a user and drop its representation into the DOM
    var currentUser = new User({username: "hello world"});
    $('.content').append(ich.user(currentUser.toJSON()));
});

What is going on here?

ericponto · Accepted Answer · 2013-01-15 03:36:05Z

1

Not sure why this would give you a parse error, but I think $('.content').append(view.el.render()); should be $('.content').append(view.render().el);.

answered Jan 15, 2013 at 3:36

ericponto

7364 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MusikPolice Over a year ago

That said, once I fixed the actual problem (see my answer below), this syntax mistake came to light. Thank you.

MusikPolice · Accepted Answer · 2013-01-15 13:28:45Z

1

After a good night's sleep and a second pass at the code, it looks like I had downloaded the json library instead of the required json2 library. Everything is working as expected now.

answered Jan 15, 2013 at 13:28

MusikPolice

1,7594 gold badges23 silver badges42 bronze badges

Collectives™ on Stack Overflow

My Backbone.js application throws a JSON.Parse SyntaxError on page load

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related