Question

我正在尝试在骨干视图中渲染手柄模板，但它在chrome和firefox中都没有渲染。请帮帮我。我也没有发现错误也是控制台。所有来源都正常加载。我在渲染过程中发出警报，工作正常。我这里没有使用任何模型，只有Backbone View，Handlebar Template和HTML，代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="underscore-min.js"></script>  
<script src="backbone-min.js"></script>
<script src="handlebars-v4.0.5.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    
<link rel="stylesheet" href="loginStyle.css">    
</head>
<body>
<script type="text/x-handlebars-template" id="landingpageTemplate">
   <div class="jumbotron">
     <div class="container"> 
     <p>Some Message Can be Used here.</p> 
         <div class="row" style="position:relative;Z-index:0;">   
           <div class=" span3 pull-right loginForm" style="background:rgba(255,255,255,0.5);">
            <form class="form-horizontal text-center" id="loginForm" name="loginForm" action="" method="post">
                <legend>Login</legend>
                <div class="control-group">
                    <input class="input-block-level" type="text" placeholder="Email Id" name="emailField" type="email" id="emailField">
                </div>
                <div class="control-group">
                    <input class="input-block-level" type="password" placeholder="Password" name="passwordField" id="passwordField">
                </div>
                <div class="control-group">
                    <a href="ccrz__CCForgotPassword?cartID=">Forgot Password</a>
                </div>
                <div class="control-group">
                    <input type="submit" value="Submit" class="btn btn-border">
                </div>                    
            </form>
        </div>
       </div>
  </div>
</div>
</script>
<script>
$(document).ready(function(){
    var compile = $("#landingpageTemplate").html();
    LandingpageView = Backbone.View.extend({
        template: Handlebars.compile(compile),
        initialize: function() {
          this.render();
        },
        render: function() {
            alert ("hello");                
            this.$el.html(this.template());
            return this;
        }
    });
    var LandingpageView = new LandingpageView();
});
</script>
</body>
</html>

Answer 1

尝试在View构造函数旁边添加var，然后使用不同的变量名来创建View实例。

$(document).ready(function(){
    var compile = $("#landingpageTemplate").html();
    var LandingpageView = Backbone.View.extend({
        template: Handlebars.compile(compile),
        initialize: function() {
          this.render();
        },
        render: function() {
            alert ("hello");                
            this.$el.html(this.template(this.model));
            return this;
        }
    });
    var landingpageView = new LandingpageView();
});

Answer 2

创建视图后，您应该将其附加到正文中的某个位置，如：

$(document.body).append(landingpageView.el);

此外，您应该在创建视图实例时传递模型：

var LandingpageView = new LandingpageView({model:someModelVariable});

OR 您应该从视图定义中移除模型：this.$el.html(this.template());

没有模型的骨干视图不渲染Handlebars模板

2 个答案: