백본 : 템플릿이 표시되지 않습니다

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> 

. 내가 < %- undefinedOne %>에 <%- alto %>을 변경하여, 예를 들어 템플릿을 (방해하면 나는 콘솔 (ReferenceError: undefinedOne is not defined)에서 오류가 발생 할 그러나 왜 HTML이 그려되지 않는

이

Answer 1

그것은 나를 위해 일하고

은 다음을 참조하십시오.? http://jsfiddle.net/sbjaz/14/

당신이 당신의보기의 '엘'을 정의한 이후 이

'#area'당신이 있는지 확인해야

이다, 거기 DOM에서 사용할 수있는 ID '영역'을 가진 요소, 또는 당신은 그것을 삽입해야합니다 수동 :

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

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

편집 :

또한, 당신은뿐만 아니라 당신의 템플릿에 DIV # 지역이 보인다. 템플릿에 'el'자체를 포함하면 안됩니다.

덕분에 학자 연하는되지