_.template() 时下划线分钟未捕获语法错误

Question

我正在尝试使用 backbone.js 显示带有某些模板的配置文件。情况是我对一种观点有疑问。所以，我有一个 View:ProfileView 和一个 Model:User.

错误（位于下划线-min.js:5）是：未捕获的语法错误：块范围声明（let、const、函数、class）在严格模式之外尚不支持

那我做的是：

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>

更新

我在提取完成时打印了它，它是在渲染之后。所以我修改了代码，在ProfileView.initialize中调用了this.model.fetch。

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

现在提取是在渲染函数之前完成的……但仍然是同样的错误。然后，如果我将模型添加为参数：

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

没有错误，但视图未显示任何内容且模型具有正确的数据。

Answer 1

class是保留字，不能作为变量名使用，也不能作为模板中的变量使用。您必须将其重命名为其他名称，模板才能正常工作。

_.template() 时下划线分钟未捕获语法错误

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

javascript

jquery

backbone.js

underscore.js-templating