_.template（）

Question

我试图使用backbone.js显示包含一些模板的个人资料。情况是我有一个观点有问题。所以，我有一个View：ProfileView和一个Model：User。

错误（在underscore-min.js：5下）是：Uncaught SyntaxError：在严格模式之外尚不支持块范围的声明（let，const，function，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是保留字，您不能将其用作变量名，也不能将其用作模板中的变量。您必须将其重命名为其他内容，模板才能正常工作。