主幹查看呈現問題

雖然我搜索了我找不到答案。任何重複的鏈接都歡迎。主幹查看呈現問題

我想呈現從html模板的骨幹視圖。我正在使用require.js及其text.js插件。雖然我可以收集模板，並可以將其傳遞到回調函中，用於要求我在入口點main.js處查看; 我無法將其渲染爲在我的index_app.html 文件中填充所需的html元素，我想從我的模板放置文本的位置是#form-login。

我錯過了什麼？它與我的選擇器有關嗎？

這裏看起來如何。

index_app.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 

    <!-- Sets initial viewport load and disables zooming --> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <!-- Include the compiled Ratchet CSS --> 
    <link href="../lib/ratchet/css/ratchet.css" rel="stylesheet"> 

    <script data-main="main" src="../lib/require/require.js"></script> 

    </head> 
    <body> 
    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --> 
    <div class="content" id="cont"> 
     <div id="form_login"> 
     </div> 
    </div> 

    </body> 
</html>

main.js：

require.config({ 
paths: { 
     backbone: '../lib/backbone/backbone-min', 
     jquery: '../lib/jquery/jquery-1.11.1.min', 
     ratchet: '../lib/ratchet/js/ratchet', 
     text: '../lib/require/text', 
     underscore: '../lib/underscore/underscore-min', 
}, 
shim: { 
'backbone': { 
deps: ['underscore', 'jquery'], 
exports: 'Backbone' 
}, 

'underscore': { 
exports: '_' 
}, 
} 
}); 


require(['views/login'], function(LoginView){ 
var loginView = new LoginView(); 
});

/視圖/登錄：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/login.html' 
    ], function($, _, Backbone, LoginTmpl){ 
     var LoginView = new Backbone.View.extend({ 

      el: $("#cont"), 

      template: _.template(LoginTmpl), 

      initialize: function(){ 
       this.render(); 
      }, 

      render: function() { 
      this.$("#form_login").html(this.template); 
      return this; 
      } 
     }); 
    //alert(LoginTmpl); 

     return LoginView; 
});

/templates/login.html：

<div class="card"> 
    <form method="POST" action="/login"> 
     <input type="text" placeholder="Username" name="username"> 
     <input type="password" placeholder="Password" name="password"> 
     <ul class="table-view"> 
      <li class="table-view-cell"> 
       Remember me 
       <div class="toggle active"> 
        <div class="toggle-handle"></div> 
       </div> 
      </li> 
     </ul> 
     <button class="btn btn-primary btn-block">Login</button> 
    </form> 
</div>

我的目錄樹：

/site 
    -/lib/ 
     ... 
    -/src/ 
     -index_app.html 
     -main.js 
     -collections/ 
     -views/ 
      -login.js 
     -templates/ 
      -login.html 
     -models/

來源

2014-09-26 Işık

在你的「/視圖/登錄」

var LoginView = new Backbone.View.extend({

應該

var LoginView = Backbone.View.extend({

（不new）

來源

2014-09-26 03:25:14 jbsouvestre

主幹查看呈現問題

回答

相關問題