骨幹：模板不顯示

Question

我昨天開始使用Backbone.js，我不知道爲什麼模板沒有顯示，即使我可以看到該部分被解析。

這是我的模板：

<script type="text/template" id="area-template"> 
      <div id="area"> 
       <label for="alto">Alto</label> 
       <input id="alto" name="alto" value=""/> 

       <label for="ancho">Ancho</label> 
       <input id="ancho" name="ancho" value=""/> 
      </div> 
      <div id="resultado" style="margin-top: 2em"> 
       El área de un rectángulo de alto <%-alto %> y ancho <%- ancho %> es <b><%- area %></b> 
      </div>  
</script> 

這是我的骨幹代碼：

<script type="text/javascript"> 

       var Rectangulo = Backbone.Model.extend({ 
       defaults: { 
        alto: 4, 
        ancho: 3 
       }, 

       area: function() { 
        return this.get('alto') * this.get('ancho'); 
       }, 
       toTemplateJSON: function() { 
        var json = this.toJSON(); 
        json.area = this.area(); 
        return json; 
       } 
      }); 

      var Vista = Backbone.View.extend({ 
       el: '#area', 
       events: { 
        "change input[name='alto']": 'onChangeAlto', 
        "change input[name='ancho']": 'onChangeAncho' 
       }, 
       template: _.template($('#area-template').html()), 

       initialize: function() { 
        _.bindAll(this, 'render', 'onChangeAlto', 'onChangeAncho'); 
        this.model = new Rectangulo(); 
        this.model.on('change', this.render); 

        this.render(); 
       }, 

       onChangeAlto: function() { 
        var v = parseInt($("input[name='alto']", this.el).val()); 
        this.model.set('alto', v); 
       }, 

       onChangeAncho: function() { 
        var v = parseInt($("input[name='ancho']", this.el).val()); 
        this.model.set('ancho', v); 
       }, 

       render: function() { 
        $("input[name='alto']").val(this.model.get('alto')); 
        $("input[name='ancho']").val(this.model.get('ancho')); 
        this.$el.html(this.template(this.model.toTemplateJSON())); 
       } 
      }); 

      var v = new Vista(); 
    </script> 

我沒有得到任何錯誤，只是一個空白頁。如果我改變<%- alto %>到< %- undefinedOne %>破壞模板（例如我得到在控制檯（ReferenceError: undefinedOne is not defined）的錯誤，但爲什麼沒有被繪製HTML

Answer 1

它的工作對我來說，看：？http://jsfiddle.net/sbjaz/14/

，因爲您已經定義視圖的「厄爾尼諾」是「#area」

你必須確保，有一個具有ID「區域」提供的DOM中的元素，或者你將不得不將其插入手動：

var v = new Vista(); 
$('body').append(v.el); 

================

編輯：

而且，看來你有DIV＃面積在你的模板中。你不應該在模板中包含'el'本身。

感謝@fbynite