阅读了无数 Backbone 教程，但仍然遗漏了一些东西

Question

更新

我终于在 2017 年底学会了 Backbone。我会删除这个 post 但 Whosebug 说删除已回答的问题是不明智的。 请忽略此问题。

我已经在 StackExchange 上阅读了无数 post 以及互联网上无数的教程，但我似乎对基本的 Backbone 使用和实施了解甚少。

我正在尝试使用从我工作服务器上的 PHP 文件生成的预过滤 JSON 构建自定义 Twitter 时间线。

我感觉很亲近，但我似乎无法让事情正常进行。有时我可以在我的控制台中查看 20 条推文，但只能通过我的模板获取 1 条推文。

这是我当前的 Backbone 设置：

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

阅读了无数 Backbone 教程，但仍然遗漏了一些东西

Read Countless Backbone Tutorials But Still Missing Something

twitter

backbone.js

underscore.js

lodash

underscore.js-templating

更新