javascript - Backbone.js 从静态 JSON 渲染 Collection View

Question

我尝试构建一个简单的音乐库来学习 Backbone.js。一切都工作正常，直到我尝试从 JSON 文件(而不是内联 javascript 对象)加载数据。

这是我的 JavaScript :

(function(){

    var myMusic = {
        Models : {},
        Collections : {},
        Views : {},
        Routers : {}
    };

    // Model
    myMusic.Models.Album = Backbone.Model.extend({
        default: {
            title : null,
            artist : null,
            cover : null,
            publicationYear : null
        },

        initialize: function(){
            console.log("Creation of the album " + this.get('title') + " from the artist " + this.get('artist'));
        }
    });

    // Collection
    myMusic.Collections.Albums = Backbone.Collection.extend({
        model : myMusic.Models.Album,
        url : "albums.json",
        initialize : function(){
            console.log("New collection created");
        }
    });

    // Collection instance
    var albumsCollection = new myMusic.Collections.Albums();
    albumsCollection.fetch();

    // Collection view
    myMusic.Views.albums = Backbone.View.extend({

        el: $("#albumsList"),

        initialize: function() {
            this.template = _.template($("#albumTemplate").html());
        },

        render: function () {
            this.$el.html(this.template({ albums: albumsCollection.toJSON() }));
            return this;
        }
    });

    // Collection view instance
    var albumsView = new myMusic.Views.albums({ collection : albumsCollection });
    albumsView.render();

})();

HTML 部分:

    <div class="albumsListWrapper">

        <script type="text/template" id="albumTemplate">
            <% _.each(albums, function(album) { %>
                <article>
                    <header>
                        <h1><%= album.title %></h1>
                        <h2><%= album.artist %></h2>
                        <h3><%= album.publicationYear %></h3>
                    </header>
                    <figure><img src="<%= album.cover %>" alt="<%= album.title %>" /></figure>
                </article>
            <% }); %>
        </script>

        <div id="albumsList" class="albumsList"></div>

    </div>

还有我的 JSON 文件:

[
    {
        "title" : "Gish",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://ecx.images-amazon.com/images/I/51sGOPMVD9L.jpg",
        "publicationYear" : 1991
    },
    {
        "title" : "Siamese dream",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://static.stereogum.com/uploads/2013/07/The-Smashing-Pumpkins-Siamese-Dream.jpg",
        "publicationYear" : 1993
    },
    {
        "title" : "Mellon Collie and the Infinite Sadness",
        "artist" : "Smashing Pumpkins",
        "cover" : "https://upload.wikimedia.org/wikipedia/fi/7/7e/Smashing_Pumpkins_-_Mellon_Collie_And_The_Infinite_Sadness.jpg",
        "publicationYear" : 1995
    },
    {
        "title" : "Adore",
        "artist" : "Smashing Pumpkins",
        "cover" : "https://s3.amazonaws.com/thisismyjam/i/6b4a1443ce6697a11537102f05b00f61.jpg",
        "publicationYear" : 1998
    },
    {
        "title" : "Machina/The Machines of God",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://yourlifeisnotyourown.files.wordpress.com/2012/02/machinathemachinesofgod.jpg",
        "publicationYear" : 2000
    },
    {
        "title" : "Machina II",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://vignette1.wikia.nocookie.net/lyricwiki/images/8/86/The_Smashing_Pumpkins-MACHINA_II_(2000).jpg",
        "publicationYear" : 2000
    },
    {
        "title" : "Zeitgeist",
        "artist" : "Smashing Pumpkins",
        "cover" : "https://s3.amazonaws.com/rapgenius/Zeitgeist.jpg",
        "publicationYear" : 2007
    },
    {
        "title" : "Oceania",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://ecx.images-amazon.com/images/I/61HWLX-iGwL.jpg",
        "publicationYear" : 2012
    },
    {
        "title" : "Monuments to an Elegy",
        "artist" : "Smashing Pumpkins",
        "cover" : "http://lecanalauditif.ca/wp-content/uploads/2015/01/Monuments_to_an_Elegy_album_cover_from_Smashing_Pumpkins.jpg",
        "publicationYear" : 2014
    }
]

问题似乎位于 albumsCollection 对象上。当我console.log它时，它是空的:(

有什么想法吗？

Answer 1

我认为您的问题来自于渲染 View 时相册尚未加载这一事实。您可以监听“sync”事件来避免这种情况。

myMusic.Views.albums = Backbone.View.extend({

  el: $("#albumsList"),

  initialize: function () {
    this.template = _.template($("#albumTemplate")
      .html());
    this.listenTo(this.collection,"sync",this.onSync)
  },
  onSync:function () {
    this.render();
    //other logic
  },
  render: function () {
    this.$el.html(this.template({
      albums: this.collection.toJSON()
    }));
    return this;
  }
});

您还应该避免在 View 中使用对相册集合的外部引用，并使用内部属性 this.collection而不是albumsCollection在render()方法。