i'm new to backbone and i'm practicing it bye making some blog by using a json file that contains the data. Everything works (ok it's most of the time bad practice probably) but there's one thing i want to add. I want to update my view when my model changes. I think I have to do it with a listener or something like that but i'm not sure and tried a lot of different things i found on stackoverflow.

Here is my code:

Item ( The Backbone Model )

var Item = Backbone.Model.extend({
    defaults: {
        titel: 'Titel niet opgegeven',
        url_titel: 'unieke sleutel urltitel',
        img_path: 'geen image toegevoegd',
        mentaar: 'Commentaar niet opgegeven',
        categorie: 'Categorie niet opgegeven',
        waardering: 0,
        artikel: 'Artikel niet opgegeven'
    },
});

ItemCollection ( The Backbone Collection )

var ItemCollection = Backbone.Collection.extend({
    model: Item,
    parator: function(model) {
        if (sortid == "waardering") {
            return -model.get(sortid); //sorteert desc
        } else {
            return model.get(sortid); //sorteert asc
        }
    }
});

ItemShelfView ( The Backbone View )

var ItemShelfView = Backbone.View.extend({
    className: 'itemshelf',
    tagName: 'div',


    render: function() {
        var self = this;

        // iterate through each item in the collection
        // and add it to the dom
        this.collection.each(function(item) {

            // create item dom node
            var itemEl = $('<div />', {
                class: "item well well-lg col-md-5"
            });
            var itemTitel = $('<h3 />').text(item.get('titel')).attr('class', "col-md-12");

            var itemLink = $('<a />').attr('href', '#detail/' + item.get('url_titel')).attr('class', "btn btn-default navigate col-md-12").text('Bekijk het volledige artikel');

            var itemAfbeelding = $('<img />').attr('src', item.get('img_path')).attr('class', " thumbnail col-md-4 ");

            var artikeltekst = item.get('artikel');
            var shortText = jQuery.trim(artikeltekst).substring(0, 200).split(" ").slice(0, -1).join(" ") + "...";

            var itemArtikel = $('<p />').text(shortText).attr('class', "col-md-8");
            var itemCategorie = $('<span />').text(item.get('categorie')).attr('class', "col-md-8");
            var itemWaardering = $('<b class="waardering" />').text(item.get('waardering')).attr('class', "col-md-8");
            var itemCommentaar = $('<span />').text(item.get('mentaar')).attr('class', "col-md-8");




            // bad practise
            itemEl.append(itemTitel);
            itemEl.append(itemAfbeelding);
            itemEl.append(itemArtikel);
            itemEl.append(itemLink);
            itemEl.append(itemCommentaar);
            itemEl.append(itemCategorie);
            itemEl.append(itemWaardering);


            // append the fragment to this views root el
            self.$el.append(itemEl);
        });
        return this;
    }
});

My ajax to get the json data

$.ajax({
    url: 'api/items.json',
    dataType: 'json',
    success: function(data) {
        console.log(data);

        var items = new ItemCollection(data);
        var shelf = new ItemShelfView({
            collection: items
        });

        $('#app').append(shelf.render().$el);

        // ensure we can edit the items
        window.items = items;
        window.shelf = shelf;
    }
});

Thank you! (i've already looked at many topics on stackoverflow.) Grtz!

i'm new to backbone and i'm practicing it bye making some blog by using a json file that contains the data. Everything works (ok it's most of the time bad practice probably) but there's one thing i want to add. I want to update my view when my model changes. I think I have to do it with a listener or something like that but i'm not sure and tried a lot of different things i found on stackoverflow.

Here is my code:

Item ( The Backbone Model )

var Item = Backbone.Model.extend({
    defaults: {
        titel: 'Titel niet opgegeven',
        url_titel: 'unieke sleutel urltitel',
        img_path: 'geen image toegevoegd',
        mentaar: 'Commentaar niet opgegeven',
        categorie: 'Categorie niet opgegeven',
        waardering: 0,
        artikel: 'Artikel niet opgegeven'
    },
});

ItemCollection ( The Backbone Collection )

var ItemCollection = Backbone.Collection.extend({
    model: Item,
    parator: function(model) {
        if (sortid == "waardering") {
            return -model.get(sortid); //sorteert desc
        } else {
            return model.get(sortid); //sorteert asc
        }
    }
});

ItemShelfView ( The Backbone View )

var ItemShelfView = Backbone.View.extend({
    className: 'itemshelf',
    tagName: 'div',


    render: function() {
        var self = this;

        // iterate through each item in the collection
        // and add it to the dom
        this.collection.each(function(item) {

            // create item dom node
            var itemEl = $('<div />', {
                class: "item well well-lg col-md-5"
            });
            var itemTitel = $('<h3 />').text(item.get('titel')).attr('class', "col-md-12");

            var itemLink = $('<a />').attr('href', '#detail/' + item.get('url_titel')).attr('class', "btn btn-default navigate col-md-12").text('Bekijk het volledige artikel');

            var itemAfbeelding = $('<img />').attr('src', item.get('img_path')).attr('class', " thumbnail col-md-4 ");

            var artikeltekst = item.get('artikel');
            var shortText = jQuery.trim(artikeltekst).substring(0, 200).split(" ").slice(0, -1).join(" ") + "...";

            var itemArtikel = $('<p />').text(shortText).attr('class', "col-md-8");
            var itemCategorie = $('<span />').text(item.get('categorie')).attr('class', "col-md-8");
            var itemWaardering = $('<b class="waardering" />').text(item.get('waardering')).attr('class', "col-md-8");
            var itemCommentaar = $('<span />').text(item.get('mentaar')).attr('class', "col-md-8");




            // bad practise
            itemEl.append(itemTitel);
            itemEl.append(itemAfbeelding);
            itemEl.append(itemArtikel);
            itemEl.append(itemLink);
            itemEl.append(itemCommentaar);
            itemEl.append(itemCategorie);
            itemEl.append(itemWaardering);


            // append the fragment to this views root el
            self.$el.append(itemEl);
        });
        return this;
    }
});

My ajax to get the json data

$.ajax({
    url: 'api/items.json',
    dataType: 'json',
    success: function(data) {
        console.log(data);

        var items = new ItemCollection(data);
        var shelf = new ItemShelfView({
            collection: items
        });

        $('#app').append(shelf.render().$el);

        // ensure we can edit the items
        window.items = items;
        window.shelf = shelf;
    }
});

Thank you! (i've already looked at many topics on stackoverflow.) Grtz!

• javascript
• json
• backbone.js
• model-view-controller

Share Improve this question Follow asked Jan 14, 2014 at 14:29 OnovarOnovar 73922 gold badges99 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

It seems like you want to only re-render the view of a single model if that model is changed, and not the entire collection. You can do this be creating a view for each model. (Your current view is for your collection.)

Take the code within your collection.each and instead of doing all the rendering there, create a new View for each collection, which will only be responsible for rendering the elements associated to one model.

Now, since you have a view for each model, you can listen to changes in the model within its own view, by doing this.model.on('change', this.render, this). Pseudocode below:

ItemShelfView()
   render:
      this.collection.each( function(m) {(
        var mview = new modelView({model: m}) //make a new modelView and pass it a model
      );}

modelView()
    initialize:
      this.model.on('change', this.render, this); //re-renders the model if it's changed
    render:
      // put the rendering code here
      //(the stuff that was previously in the each loop in the collection view)

I'd remend this tutorial: http://arturadib./hello-backbonejs/. It goes at a very slow pace and works toward what I think you're trying to do (render a collection of models; re-render a model if it changes)