Backbone 没有模型的视图不呈现车把模板

Question

我正在尝试在 backbone 视图中呈现车把模板，但它在 chrome 和 firefox 中都没有呈现。请帮我解决这个问题。我没有发现错误是控制台，因为 well.All 源正在加载 fine.I 在渲染期间发出警报那是有效的 fine.I 我没有在这里使用任何模型，只有 Backbone 视图，车把模板和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});

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

Backbone 没有模型的视图不呈现车把模板

Backbone View without model not rendering Handlebars Template

javascript

jquery

backbone.js

handlebars.js