무수한 백본 튜토리얼 읽기 여전히 무언가 누락 됨

Question

인터넷에서 수많은 자습서뿐만 아니라 StackExchange에서도 수많은 게시물을 읽었지 만 기본적인 이해는 Backbone 사용 및 구현에 불과합니다.

내 작품 서버의 PHP 파일에서 생성 된 사전 필터링 된 JSON을 사용하여 사용자 정의 Twitter 타임 라인을 작성하려고합니다.

나는 가깝다고 느낀다. 그러나 나는 일을하는 것처럼 보이지 않는다. 때때로 콘솔에서 20 개의 트윗을 볼 수 있지만 템플리트를 통해 렌더링 할 수있는 트윗은 1 개입니다. 여기

(function($){ 

    if(!this.hasOwnProperty("app")){ this.app = {}; } 
    app.global = this; 

    app.api = {}; 

    app.api.Tweet = Backbone.Model.extend({ 
     defaults: {} 
    }); 

    app.api.Tweets = Backbone.Collection.extend({ 
     model: usarugby.api.Tweet, 
     url: "https://custom.path.to/api/tweets/index.php", 
     parse: function(data){ 
      return data; 
     } 
    }); 

    app.api.TweetsView = Backbone.View.extend({ 
     el: $('#tweet-wrap'), 
     initialize: function(){ 
      _.bindAll(this, 'render'); 
      this.collection = new app.api.Tweets(); 
      this.collection.bind('reset', function(tweets) { 
       tweets.each(function(){ 
        this.render(); 
       }); 
      }); 
      return this; 
     }, 
     render: function() { 
      this.collection.fetch({ 
       success: function(tweets){ 
        var template = _.template($('#tweet-cloud').html()); 
        $(tweets).each(function(i){ 
         $(this).html(template({ 
          'pic': tweets.models[i].attributes.user.profile_image_url, 
          'text': tweets.models[i].attributes.text, 
          'meta': tweets.models[i].attributes.created_at 
         })); 
        }); 
        $(this.el).append(tweets); 
       } 
      }); 
     } 
    }); 

    new app.api.TweetsView(); 

}(jQuery)); 

그리고 내 현재 HTML과 템플릿은 다음과 같습니다 :

<div id="header-wrap"></div>  

<div id="tweet-wrap"></div> 

<script type="text/template" id="tweet-cloud"> 
    <div class="tweet"> 
     <div class="tweet-thumb"><img src="<%= pic %>" /></div> 
     <div class="tweet-text"><%= text %></div> 
     <div class="tweet-metadata"><%= meta %></div> 
    </div> 
</script> 

<script> if(!window.app) window.app = {}; </script> 

가 나는 또한 테스트를위한 CodePen 사용할 수 있습니다

여기에 내 현재 백본 설정입니다. 모든 조언을 크게 주시면 감사하겠습니다.

Answer 1

의견과 마찬가지로, 추가 읽기 및 코드 다시 작성이 필요할 수 있습니다. 여러보기를 렌더링하는보기에 대한 가장 간단한 예는 여기 adrianmejia's backbone tutorial example입니다.

아래 스 니펫에는 추가보기와 두 가지 추가 기능이 포함되어 있으며 렌더링 기능과 초기화 기능이 업데이트됩니다. 'cfa'를 검색하여 변경 사항을 검토하십시오.

(function($){ 
 
    
 
    if(!this.hasOwnProperty("app")){ this.app = {}; } 
 
    app.global = this; 
 

 
    app.api = {}; 
 

 
    app.api.Tweet = Backbone.Model.extend({ 
 
     idAttribute: 'id_str' 
 
    }); 
 

 
    app.api.Tweets = Backbone.Collection.extend({ 
 
     model: app.api.Tweet, 
 
     url: "https://cdn.usarugby.org/api/tweets/index.php", 
 
     parse: function(data){ 
 
      return data; 
 
     } 
 
    }); 
 
    
 
    app.api.TweetView = Backbone.View.extend({ 
 
     tagName: 'div', 
 
     template: _.template($('#tweet-cloud').html()), 
 
     initialize: function(){ 
 
      
 
     }, 
 
     render: function(){ 
 
      var j = {}; 
 
      j.pic = this.model.get('user').profile_image_url; 
 
      j.text = this.model.get('text'); 
 
      j.meta = this.model.get('meta'); 
 
      this.$el.html(this.template(j)); 
 
      return this; 
 
     }, 
 
    }); 
 
    
 
    app.api.TweetsView = Backbone.View.extend({ 
 
     el: $('#tweet-wrap'), 
 
     initialize: function(){ 
 
      this.collection = new app.api.Tweets(); 
 
      this.collection.on('reset', this.onReset, this); 
 
      this.collection.on('add', this.renderATweet, this); 
 
      this.collection.fetch(); 
 
     }, 
 
     
 
     onReset: function(){ 
 
      this.$el.html(''); 
 
      this.collection.each(this.renderATweet, this); 
 
     }, 
 
     renderATweet: function (tweet) { 
 
      var tweetView = new app.api.TweetView({ model: tweet }); 
 
      this.$el.append(tweetView.render().el); 
 
     }, 
 
    }); 
 
}(jQuery)); 
 

 

 
    $(document).ready(function(){ 
 
     new app.api.TweetsView(); 
 
    });

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 
<script src="https://static.usarugby.org/lib.min.js"></script> 
 

 
<div id="header-wrap"></div> 
 

 
<div id="tweet-wrap"></div> 
 

 
<script type="text/template" id="tweet-cloud"> 
 
    <div class="tweet"> 
 
     <div class="tweet-thumb"><img src="<%= pic %>" /></div> 
 
     <div class="tweet-text"> 
 
      <%= text %> 
 
     </div> 
 
     <div class="tweet-metadata"> 
 
      <%= meta %> 
 
     </div> 
 
    </div> 
 
</script> 
 

 
<div id="footer-wrap"></div> 
 

 
<script> 
 
    if(!window.app) window.app = {}; 
 
</script>