백본 js Todo 코드가 브라우저에 표시되지 않습니다.

백본 JS를 학습하면서 아래 코드가 브라우저에 표시되지 않는 이유는 무엇입니까? 나는 라우터를 사용하기는했지만 여전히 브라우저에 표시하지 않습니다. 무엇이 잘못되었는지 말해주세요. BTW, 그냥 콘솔에 표시 출력. 그 바보 같은 질문이라면 미안 해요.백본 js Todo 코드가 브라우저에 표시되지 않습니다.

<html> 
    <head> 
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> 
     <script type="text/javascript"> 
      /*$.getJSON('api/users/1',function(data){ 
       console.log(data); 
      });*/ 
     </script> 
    </head> 
    <body> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> 

     <script type="text/javascript"> 

      var TodoItem = Backbone.Model.extend({ 
       toggleStatus: function(){ 
        if(this.get('status') == 'incomplete'){ 
         this.set({'status':'complete'}); 
        } else { 
         this.set({'status':'incomplete'}); 
        } 
       } 
      }) 

      var TodoView = Backbone.View.extend({ 
       template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'), 
       render: function(){ 
        this.$el.html(this.template(this.model.toJSON())); 
       }, 
       events: { 
        'change imput': 'toggleStatus' 
       }, 
       toggleStatus : function(){ 
        this.model.toggleStatus(); 
       } 
      }) 


      var todoItem = new TodoItem({ description: 'Pick up milk', status: 'incomplete', id: 1 }); 
      var todoView = new TodoView({model: todoItem}); 


      console.log(todoView.el); 

      var Router = Backbone.Router.extend({ 
       routes: { 
        '': 'home' 
       } 
      }); 
      var router = new Router(); 
      router.on('route:home' , function(){ 
        todoView.render(); 
      }); 

      Backbone.history.start(); 
     </script> 
    </body> 
</html>

출처

2015-01-22 user3815806

에 대한

세트 "엘"속성은 모든보기를 지정, 태그 이름, 클래스 이름과 ID를 새로운 요소를 생성 할 때,이 패션의 한 렌더링해야하고, 요소를 필요로 할 때 추가 할 그것을 보려면 el을 지정해야합니다 (jquery가 선택). 귀하의 코드의 다음 호는 렌더 함수에서 이것을 반환하지 않는다는 것입니다. 중첩 된 뷰가 있으면이를 반환해야합니다.

내가 지금 왜 엘을 선언,이 빈 http://jsbin.com/jefuyuxanu/2/edit

출처

2015-01-22 13:58:23 Himen

그냥 의심 .. 나는 '엘'기본값은 DIV 태그라고 들었고, 그럼 왜 엘을 선언해야 하는가? '# 테스트'? – user3815806

내가보기를 만들려면 두 가지 방법이 있다고 언급했습니다. 먼저 추상적 뷰를 생성하여 언제 어디서나 렌더링 할 수 있습니다. 둘째, 미리 정의 된 개체 틀을 렌더링 할 수 있습니다. 너 말이 맞았 어. el의 기본값은 DIV이지만 선택된 엘이 DOM에없는 경우 DOM에 렌더링되고 첨부 될 수 없습니다. 그래서 엘 참조는 인라인 렌더링을 위해 존재하는 DOM 요소를 참조해야합니다. 존재하는 DOM 요소를 정의하지 않으면 뷰는 즉시 렌더링 할 수는 있지만 표시되지는 않으며 미리 렌더링 된 요소 (자리 표시 자)에 수동으로 연결할 수 있습니다. – Himen

다시 같은 질문을해서 죄송합니다. 내 실제 의문은 : '엘'기본값이 DIV 태그이고 DIV 태그가 DOM에만있는 것 같아요, 맞습니까 ?? 그래서 '엘'값을 지정하지 않으면 왜 표시되지 않습니까? 친절하게 내 쿼리를 이해 ... – user3815806

TodoView는 DOM에 추가되지 않습니다. 보기

var TodoView = Backbone.View.extend({ 
    el:'body', 
    template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'), 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    events: { 
     'change imput': 'toggleStatus' 
    }, 
    toggleStatus : function(){ 
     this.model.toggleStatus(); 
    } 
})

출처

2015-01-22 13:44:38

그냥 의심 .. 내가 '엘'기본값은 DIV 태그 들었에서 테스트 한 '몸'? – user3815806

백본 js Todo 코드가 브라우저에 표시되지 않습니다.

답변

관련 문제