underscore.js Uncaught SyntaxError: missing ) after argument list

Question

我遇到了这个奇怪的问题，其中出现错误

underscore.js:(Line number-1442) Uncaught SyntaxError: missing ) after argument list.

我在我的项目中使用 jQuery、Underscore 和 Backbone.js。当我尝试在另一个视图中呈现一个视图时，我遇到了上述问题。下面是我的代码片段。

当我的代码试图从我的 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">&times;</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---如--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'> &times;</span></span>";
            }else{
                console.log("Doesn't contains @");
                styledEmail = "<span class='incorrect'><span>"+currentMail.text()+"</span><span class='discard'> &times;</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();
})();

Answer 1

脚本放在关闭body标签之后，这是无效的，把它们放在之前。这可能是您的脚本无法正常工作的原因。

Answer 2

所以问题出在函数调用上，我错误地输入了 funtion 而不是 function。

<script type="text/template" id="temp_maillist">
    <span>Hi There</span>
    <%_.each(data,funtion(item){%>
    <%console.log(item)%>
        <%=item%>
    <%})%>
</script>

underscore.js Uncaught SyntaxError: missing ) after argument list

underscore.js Uncaught SyntaxError: missing ) after argument list

rendering

backbone.js

underscore.js-templating