Search code examples
javascriptjquerybackbone.jsunderscore.js-templating

Uncaught SyntaxError in underscore-min when _.template()


Im trying to show a profile with some templates using backbone.js. The situation is that I'm having problems with one view. So, I have a View:ProfileView and a Model:User.

The error (at underscore-min.js:5) is: Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

Then what I do is:

router.js:

...
profile:function(){
            console.log("profile");

            this.user = new User();
            this.profileView = new ProfileView({
                model: this.user
     });
...

User.js:

...
initialize: function(){
        //var that = this;
        this.fetch({
            success: function(){
                console.log("fetch success");
            }
        });

        this.on("change", function(){
            console.log("change on model");
         });
    },
...

ProfileView.js:

...
initialize: function(){
        _.bindAll(this, "render");
        this.model.bind('change', this.render);
    },
render:function(){
        console.log("render Profile");

        var tmp = _.template($('#profile-template').html()); //ERROR
        $(this.el).html(tmp(this.model.toJSON()));
        return this;
}
...

profile.blade.php:

...
<script type="text/template" id="profile-template">
    <div class="col-md-3 widget" id="widget">
        <!-- Widget -->
        <div class="widget widget-shadow text-center">
            <div class="widget-header">
                <div class="widget-header-content">
                    <a class="avatar avatar-lg" href="javascript:void(0)">
                        <img src="../public/assets/prof.jpg" alt="...">
                    </a>
                    <h4 class="profile-user"><%= name %></h4>
                    <p class="profile-type"><%= type %>, <%= class %></p>
                    <p>
                        <i class="icon icon-color wb-home" aria-hidden="true"></i><a href="#">&nbsp;<%= website %></a>
                    </p>
                    <p>
                        <i class="icon icon-color wb-envelope" aria-hidden="true"></i> <%= email %>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9" id="profile">
        <!-- Panel -->
        <div class="panel">
            <div class="panel-body nav-tabs-animate">
                <div class="tab-content">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="panel-title">about</h3>
                            <p><%= about %></p>
                        </div>
                    </div>
                    <div class="row">
                        <p></p>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <h4 class="example-title">contact</h4>
                            <p><%= contact %></p>
                        </div>
                        <div class="col-md-3">
                            <h4 class="example-title">capacity</h4>
                            <p><%= capacity %></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

UPDATE

I have printed when the fetch is done and it is after the render. So I have modified the code and call this.model.fetch in ProfileView.initialize.

initialize: function(){
        var that = this;
        this.model.fetch().done(function(){
            console.log("fetch done");
            that.render();
        });

And now the fetch is done before the render function... but still the same error. Then, if I add the model as a parameter:

 var tmp = _.template($('#profile-template').html(), this.model);

There is no error but the view doesn't show anything and the model has the correct data.


Solution

  • class is a reserved word and you cannot use it as a variable name, or use it as a variable in a template. You will have to rename it to something else and the template will work.