CODEWITHSUNDEEP
javascriptjqueryjsonbackbone.jsicanhaz.js
MusikPolice
MusikPolice

Reputation: 1759

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

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?

Upvotes: 1

Views: 349

Answers (2)

MusikPolice
MusikPolice

Reputation: 1759

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.

Upvotes: 1

ericponto
ericponto

Reputation: 736

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);.

Upvotes: 1

Related Questions