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="#"> <%= 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.
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.