Search code examples
javascriptbackbone.js

Backbone.js Collection View Through Model View


I'd like to apologize for the mess below - having some difficulty with the following code. Attempting to display each model view through the collection view which while not succinct is required. Any help would be greatly appreciated. Tips and pointers as well. Thank you in advance.

$(function() {

/* Model */
var Publication = Backbone.Model.extend({
    defaults: {
        title: "",
        published: ""
    }
});

/* Collection */
var PublicationCollection = Backbone.Collection.extend({
    model: Publication,
    url: 'http://www.stellarbiotechnologies.com/media/press-releases/json'
});

/* Model View */
var PublicationView = Backbone.View.extend({
    tagName: 'li',
    className: 'publication',
    el: 'displayHere',
    template: _.template($('#publicationTemplate').html()),

    initialize: function() {
        this.model.on('destroy', this.remove, this);
    },

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

/* Collection View */
var AppView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {

        var pubs = this.collection;
        pubs.fetch;
        pubs.bind('reset', this.render);
        pubs.bind('add', this.add, this);
        pubs.bind('remove', this.remove, this);    
    },

    render : function() {
        this.collection.each(this.add, this);
        return this;
    },

    add: function(pub) {
        var pub = new PublicationView({model: Publication});
        this.$el.html(pub.render().el);
    },    

    remove: function(pub) {
        var pubs = this.collection;
        pubs.remove(pub);
        pubs.render();
    },

});

var App = new AppView({collection: PublicationCollection});

});

HTML:

<body>
<ul id="displayHere"></ul>
</body>

Template:

<script id="publicationTemplate" type="text/template">
<td class="id"><%= id %></td>
<td class="title"><%= title %></td>
<td class="published"><%= published %></td>
</script>

Solution

  • Here we go

    !DOCTYPE html>
    <html lang="EN">
    <head>
        <meta charset="UTF-8">
        <title>Help 7</title>
    </head>
    <body>
        <ul id="displayHere"></ul>
        <script id="publicationTemplate" type="text/template">
        <td class="title"><%= title %></td>
        <td class="published"><%= published %></td>
        </script>
    
    
    <script src="js/jquery.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/backbone.js"></script>
    <script>
    $(function() {
    /* The initialization of the models is correct, according to data json page you supply */
    /* Model */
    var Publication = Backbone.Model.extend({
        defaults: {
            title: "",
            published: ""
        }
    });
    /* They need to manipulate the data received since apparently come masked in the variable "news", this variable contains the main array with which it is     going to work. */
    /* Collection */
    var PublicationCollection = Backbone.Collection.extend({
        model: Publication,
        url: 'http://www.stellarbiotechnologies.com/media/press-releases/json',
        /*
        for this we will use the "parse" function that provides us backbone, which performs this function is handled in the manner in which the data received     before storing in the collection needed
        */
        parse: function(response){
            return response.news;
        }
    });
    /*
    Here you must not set the item as "#displayHere"
    */
    /* Model View */
    var PublicationView = Backbone.View.extend({
        tagName: 'li',
        className: 'publication',
        template: _.template($('#publicationTemplate').html()),
    
        initialize: function() {
            this.model.on('destroy', this.remove, this);
        },
    
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });
    
    /* Collection View */
    var AppView = Backbone.View.extend({
        /*
        this is where you establish your main item as "#displayHere"
        */
        el: '#displayHere',
        /*
        Here is a somewhat tricky part when receiving data from somewhere, and     it takes establish the way in which they will work and much depends on your     project, then what we'll do is add a listener to the collection, this means that     when you run the "fetch" this will execute the "sync" event which is to be this     outstanding.
        */
        initialize: function() {
            this.listenTo(this.collection, "sync", this.render);
        },
    
        render : function() {
            this.collection.each(this.add, this);
            return this;
        },
    
        add: function(newModel) {
            var pub = new PublicationView({model: newModel});
            this.$el.append(pub.render().el);
        },    
        /* Remove is not used until now */
        remove: function(pub) {
            var pubs = this.collection;
            pubs.remove(pub);
            pubs.render();
        }
    
    });
    /*
    First we have to create a collection, you can not just send the constructor     PublicationCollection
    */
    var AppPublicationCollection = new PublicationCollection();
    /*
    And created the collection, then we can send it
    */
    var App = new AppView({collection: AppPublicationCollection});
    /*
    And finally we have to run the "fetch" function to send for data
    */
    AppPublicationCollection.fetch();
    
    });
    </script>
    </body>
    </html>