看了无数的 Backbone.js 教程,但仍然错过了一些东西

mpbci0fu  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(151)

更新

我终于在2017年底学会了Backbone。我想删除这篇文章,但StackOverflow说删除已回答的问题是不明智的。请忽略这个问题。
我在StackExchange上读了无数的帖子,也在互联网上读了无数的教程,但我似乎还没有理解基本的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可供测试。任何建议将不胜感激。

7vhp5slm

7vhp5slm1#

正如注解所建议的,可能需要额外的阅读和代码重写。一个视图渲染多个视图的最简单的例子是adrianmejia's backbone tutorial example
下面的代码片段包括一个额外的视图和几个添加的函数沿着更新的render和initialize函数。搜索“cfa”以查看更改。
第一个

相关问题