catch되지 않은 오류 ReferenceError : 모델 I는 backbone.js 응용 프로그램에서 HTML 파일에서

-1

demo.jscatch되지 않은 오류 ReferenceError : 모델 I는 backbone.js 응용 프로그램에서 HTML 파일에서

var CommentsCollection = Backbone.Collection.extend({ 

    url : "http://0.0.0.0:8080/" 

}); 

var CommentsListView = Backbone.View.extend({ 

    el: '.page', 

    render : function(){ 
     var that = this; 
     var commentsCollection = new CommentsCollection(); 
     commentsCollection.fetch({ 
      success:() => { 
        var models = commentsCollection.models; 
        // _.each(models, function(models){ 
        // console.log(models.get('firstname')); 
        // }); 

        var template = _.template($('#reddit-comments-template').html()); 
        that.$el.html(template(models)); 
      } 
     }) 
    } 
}); 


var PageRouter = Backbone.Router.extend({ 
    routes: { 
     '' : 'home' 
    } 
}); 

Backbone.history.start();

index.html을 실제로

<html> 
<head> 
    <title> </title> 
</head> 
<body> 
    <div class="container"> 
     <h1>Top posts</h1> 
     <hr /> 
     <div class="page"></div> 
    </div> 

    <script type="text/template" id="reddit-comments-template"> 
     <table class = "comments table"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>Commments</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <% _.each(models, function(models){ %> 
        <tr> 
         <td><%= models.get('firstname') %></td> 
         <td><%= models.get('lastname') %></td> 
         <td><%= models.get('id') %></td> 
        </tr> 
        <% }); %> 
       </tr> 
      </tbody> 
     </table> 
    </script> 

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
    <script type="text/javascript" src="underscore-min.js"></script> 
    <script type="text/javascript" src="backbone-min.js"></script> 
    <script type="text/javascript" src="demo.js"></script> 

</body> 
</html>

당신이 볼 경우 정의되지 API에서 데이터를 가져 와서 데이터의 변경 사항에 따라 뷰를 업데이트하려고 시도한 컬렉션은 API에서 데이터를 가져온 다음 컬렉션의 모델을 모델의 데이터 위로 반복합니다. 그 모델의 변수는 당신이 볼 수있는 코멘트에 js 스크립트에 추가 된 로그에 인쇄됩니다. 그러나 값이 html 파일로 전달되지 않아서 그 오류가 발생합니다. 그것을 고칠 수있는 방법을 알려주시겠습니까?

출처

2017-11-17 Nobody

이것은'toJSON'과는 아무런 관련이 없습니다. 모델을'models'로 접근하기 위해서'template ({models : models}) '을 호출하면됩니다. –

['_.template' 함수 사용법] (https://stackoverflow.com/a/41148034/1218980)을 참조하십시오. –

준비가 되었으면 효율적으로 [백본 (그리고 대부분 jQuery)으로 목록 렌더링] (https://stackoverflow.com/a/44034868/1218980) –

컬렉션을 json으로 변환하고 템플릿으로 전달하고 모델에 액세스 할 수 있습니다. 이 방법으로 _.each를 사용하여 모델을 반복하고 템플릿의 속성을 렌더링 할 수 있습니다.

var CommentsListView = Backbone.View.extend({ 

    el: '.page', 

    render : function(){ 
     var context = {}; 
     this.commentsCollection = new CommentsCollection(); 
     this.commentsCollection.fetch({ 
      success:() => { 
        //var models = commentsCollection.models; 
        // _.each(models, function(models){ 
        // console.log(models.get('firstname')); 
        // }); 
        context['models'] = this.commentsCollection.toJSON() 
        var template = _.template($('#reddit-comments-template').html()); 
        that.$el.html(template(context)); 
      } 
     }) 
    } 
});

템플릿 :

<html> 
<head> 
    <title> </title> 
</head> 
<body> 
    <div class="container"> 
     <h1>Top posts</h1> 
     <hr /> 
     <div class="page"></div> 
    </div> 

    <script type="text/template" id="reddit-comments-template"> 
     <table class = "comments table"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>Commments</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <% _.each(models, function(model){ %> 
        <tr> 
         <td><%= model.firstname %> 
         <td><%= model.lastname %></td> 
         <td><%= model.id %></td> 
        </tr> 
        <% }); %> 
       </tr> 
      </tbody> 
     </table> 
    </script> 

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
    <script type="text/javascript" src="underscore-min.js"></script> 
    <script type="text/javascript" src="backbone-min.js"></script> 
    <script type="text/javascript" src="demo.js"></script> 

</body> 
</html>

출처

2017-11-17 08:14:41 waranlogesh

아니, 작동하지 않습니다, 같은 오류. – Nobody

@ 아무도 업데이트 된 코드를 확인하지 않습니다. – waranlogesh

모두 백본의 모델과 컬렉션을 볼 수 있습니다 toJSON() 방법으로 직렬화 먼저 템플릿 컬렉션 모델을 보내기 전에. 컬렉션 위에 toJSON을 사용하면 각 모델의 해시 속성을 포함하는 배열을 반환합니다.

var CommentsListView = Backbone.View.extend({ 
    el: '.page', 
    // read and compile the template once 
    template: _.template($('#reddit-comments-template').html()), 

    render: function() { 
     var commentsCollection = new CommentsCollection(); 
     commentsCollection.fetch({ 
      context: this, // avoids "that = this;" 
      success: function(collection, response, options) { 
       that.$el.html(this.template({ models: collection.toJSON() })); 
      } 
     }); 
    } 
});

추신 : 나는 성공 콜백의 기본 인수를 추가했습니다.

출처

2017-11-17 10:59:35

catch되지 않은 오류 ReferenceError : 모델 I는 backbone.js 응용 프로그램에서 HTML 파일에서

답변

관련 문제