【发布时间】：2016-10-02 10:49:20
【问题描述】：
我遇到了这个奇怪的问题，我遇到了错误
underscore.js:(Line number-1442) Uncaught SyntaxError: missing) 在参数列表之后。
我在我的项目中使用 jQuery、Underscore 和 Backbone.js。当我尝试在另一个视图中渲染视图时，我遇到了上述问题。下面是我的代码 sn-p。
当我的代码试图从我的 html 文件中获取模板时，我遇到了错误。即在 MailListView 的渲染方法的第一行。如果我嵌套视图，是否需要传递更多变量。会不会和版本有关？
HTML 代码------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8"> <!--Character encodinng-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
<link href="css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse no-margin no-radius">
<div class="container">
<a class="navbar-brand" href="#">New Mail</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Join Us</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Learn More</a></li>
<ul class="dropdown-menu">
<li class="dropdown-header">Yo Yo Header</li>
<li><a href="#">Java</a></li>
<li><a href="#">C++</a></li>
<li class="divider"></li>
<li><a href="#">Java Script</a></li>
<li><a href="#">CSS</a></li>
</ul>
</ul>
</div>
<div class="navbar-right navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicons glyphicons-option-vertical"></span>
</div>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
</body>
<script type="text/template" id="temp_mailsender">
<div class="col-sm-12 fa-border">
<div class="navbar navbar-inverse no-margin no-radius">
<a class="navbar-brand">New Message</a>
<a class="navbar-brand pull-right">×</a>
</div>
<div class="col-sm-12 sendlist border-bottom-1 no-padding">
<div class="col-sm-1">To</div><div class="bucket"></div>
<div class="col-sm-10 no-padding currentmail" contenteditable="true" tabindex="1"></div>
<div class="col-sm-1 text-right">Cc Bcc</div>
</div>
<div class="col-sm-12 subject border-bottom-1 no-padding">
<div class="col-sm-1">Subject</div>
<div class="col-sm-11 no-padding" contenteditable="true" tabindex="1"></div>
</div>
</div>
</script>
<script type="text/template" id="temp_maillist">
<span>Hi There</span>
<%_.each(data,funtion(item){%>
<%console.log(item)%>
<%=item%>
<%})%>
</script>
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</html>
--------Backbone--JAVASCRIPT---as-in--script.js-----
(function(){
var EmailSenderView = Backbone.View.extend({
el:'.row',
events:{
'keyup .sendlist':'validate'
},
initialize : function(options){
this.options = options;
},
render : function(){
var temp = _.template($('#temp_mailsender').html());
var html = temp(); // You can pass on data that you want to render on this template
this.$el.html(html).trigger('create');
this.renderEmailListView();
},
validate : function(e){
var keyCode = e.which || e.keyCode;
if(keyCode == 13){
var currentMail = $('.currentmail');
var styledEmail;
if(currentMail.text().indexOf('@') != -1){
console.log("contains @");
styledEmail = "<span class='correct'><span>"+currentMail.text()+"</span><span class='discard'> ×</span></span>";
}else{
console.log("Doesn't contains @");
styledEmail = "<span class='incorrect'><span>"+currentMail.text()+"</span><span class='discard'> ×</span></span>";
}
currentMail.text("");
this.addToBucket(styledEmail);
}
},
renderEmailListView :function(){
var emaiIdListView = new EmailListView({model:emailIdList,el:this.$('.bucket')});
emaiIdListView.render();
},
addToBucket : function(mailId){
console.log("in add to bucket");
var email = new EmailId();
email.set('id',mailId);
console.log("in add to bucket before add");
emailIdList.add(email);
console.log(emailIdList.length);
},
remove : function(e){
emailIdList.remove($(e.target).parent());
}
});
var EmailListView = Backbone.View.extend({
events:{
'click .discard':'remove'
},
initialize : function(options){
var self = this;
self.options = options;
this.model.on('add remove', self.render(), self);
},
render : function(){
console.log("----------------Getting issue at Below Line----------------");
var temp = _.template($('#temp_maillist').html());
console.log("------------This Line not printed on console--------------");
var html = temp(this.options.model);
self.$el.html(html).trigger('create');
},
remove : function(e){
this.model.remove($(e.currentTarget).parent());
}
});
var EmailId = Backbone.Model.extend({});
var EmaiIdCollection = Backbone.Collection.extend({
model: EmailId
});
var emailIdList = new EmaiIdCollection();
var emailSenderView = new EmailSenderView();
emailSenderView.render();
})();
【问题讨论】：
-
我从未使用过 underscore.js，但在他们的网站上他们说需要 Node.js
-
您在
<%_.each(data,funtion(item){%>中有错字，您需要function。 -
谢谢，这就是问题所在.. OOps :)
-
关闭为“印刷错误”。
标签： backbone.js rendering underscore.js-templating