백본 루트에서 도움이 필요하십니까

Question

나는 백본 경로를 배우고 있습니다. 방금 백본을 사용하여 작은 앱을 만들었습니다. 그러나 경로가 작동하지 않습니다. 내가 콘솔 여기

Uncaught TypeError: Cannot read property 'el' of undefined

에서이 오류를 얻고 것은 이것은 위의 오류가 콘솔 메시지에 따라 발생하는 라인 내 코드

$(function() { 
/****************************/ 
var documents = [ 
    new Backbone.Model({ 
     title: 'Title One', 
     content: 'This is content for JS module' 
    }), 
    new Backbone.Model({ 
     title: 'Title Two', 
     content: 'Module Systems Module Systems Module Systems Module Systems Module Systems' 
    }) 
]; 

var contentsView = Backbone.View.extend({ 
    tagName: 'ul', 
    render: function() { 
     _(this.collection).each(function (document) { 
      this.$el.append(new DocumentListView({model: document}).render().el); 
     }, this); 
    } 
}); 

var DocumentListView = Backbone.View.extend({ 
    tagName: 'li', 
    render: function() { 
     this.$el.html(this.model.get('title')); 
     return this; 
    } 
}); 

var DocumentRouter = Backbone.Router.extend({ 
    routes: { 
     'contents': 'contents' 
    }, 
    contents: function() { 
     $('body').html(new contentsView({collection: documents}).render().el); 
    } 
}); 

var router = new DocumentRouter(); 
Backbone.history.start(); 

router.navigate('contents', {trigger:true}); 
/****************************/ 
}); 

입니다

$('body').html(new contentsView({collection: documents}).render().el);

어떻게 이 문제가 해결 되었습니까?

Answer 1

contentsView render 함수에서 반환해야합니다. .

var contentsView = Backbone.View.extend({ 
     tagName: 'ul', 
     render: function() { 
      _(this.collection).each(function (document) { 
       this.$el.append(new DocumentListView({model: document}).render().el); 
      }, this); 
     return this; 
     } 
    }); 

그리고 당신은, 몸에 contentsview를 추가이 $ 같은 ('몸')를 사용하는 의미 추가하는 경우 (. 새로운 contentsView ({모음 : 문서}) 렌더링() $ 엘.) contentsView 유일한 내용이 body 태그에 대한 의미 경우

이

var contentsView = Backbone.View.extend({ 
      el : 'body', 
      tagName: 'ul', 
      render: function() { 
       _(this.collection).each(function (document) { 
        this.$el.append(new DocumentListView({model: document}).render().el); 
       }, this); 
      return this; 
      } 
     }); 
contentsView.render();