-1

UPDATE

I finally learned Backbone back in late 2017. I'd delete this post but StackOverflow says it's not wise to delete answered questions. Please ignore this question.


I've read countless posts here on StackExchange as well as countless tutorials across the Internet but I seem to be just off from understanding basic Backbone use and implementation.

I'm attempting to build a custom Twitter timeline using pre-filtered JSON that is generated from a PHP file on my work's server.

I feel close but I just can't seem to get things to work. At times I'm able to view 20 tweets in my console but am only able to get 1 tweet to render via my template.

Here is my current Backbone setup:

(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));

And here is my current HTML and template:

<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>

I also have a CodePen available for testing. Any advice would be greatly appreciated.

6
  • 2
    Questions must include the source code in the question itself. It can't be linked to.
    – anon
    Jul 6, 2016 at 19:43
  • @QPaysTaxes Source code has been added to the question as requested.
    – DaveyJake
    Jul 7, 2016 at 6:24
  • FYI this inside your IIFE seems to be the Window object so unless you do something like (function() {}.call({})) the whole IIFE thing and app.global reference seems to be pointless (Unless I'm missing something)...
    – T J
    Jul 7, 2016 at 10:31
  • Possible duplicate of Rendering collection view in backbone.js
    – T J
    Jul 7, 2016 at 10:38
  • When reset is triggered, for each tweet you're rendering the view. And each of these view render fetches the collection over and over again and upon success iterates over all the tweets again. Could you refer to some of the countless tutorials you read that does something like this? Because I remember answering many of these collection view rendering problems and wonder where does everyone gets these references from.
    – T J
    Jul 7, 2016 at 11:00

1 Answer 1

0

Like the comments suggest, additional reading and code rewrite may be needed. The simplest example for a view rendering multiple views is here adrianmejia's backbone tutorial example.

The snippet below includes an additional view and a couple of added functions along with updating the render and initialize functions. Search for 'cfa' to review changes.

(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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.