Question

i am trying to make my first backbone app, and have run into a problem that i just cant solve..

I have a list of links, each link has a counter next to it,
when i click on a link i want the counter to increment by 1. (i have made this, and it is working)

Next i want the link i clicked to move up in the list IF the counter value is higher than the link above.

like this.

• first link (4)
• second link (3)
• third link (3) <– if i click on this link i want it to move up above second link.

I have tried using comparator and sortBy, but each time i try something i just cant seem to re-render the view and also have the link move up one spot.

I did manage to sort the list initially, when the main view is initialized.
But updating the view and list placement after i click one of the links i cant figure out how to accomplish.

my code:

(function() {

window.App = {
    Models: {},
    Collections: {},
    Views: {}
};
window.template = function(id) {
    return _.template( $('#' + id).html() );
};


//Modellen
App.Models.Task = Backbone.Model.extend({
    defaults: {
        name: 'Foo Bar Baz',
        uri: 'http://www.google.com',
        counter: 0
    },

    validate: function(attr) {
            if ( ! $.trim(attr.name) ) {
                    return 'En opgave kræver en title.';
            };
    }
});

//Collection
App.Collections.Tasks = Backbone.Collection.extend({ 
    model: App.Models.Task,

    comparator: function(task) {
    return task.get('counter');
    },

});



//Singel view
App.Views.TaskView = Backbone.View.extend({
    tagName: 'li',

    template: template('Tasks'),

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

    },

    events: {
    'click .edit' : 'retTask',
    'click .delete' : 'destroy',
    'click .uriLink' : 'addCounter'
    },

    retTask: function() {
        var newTaskNavn = prompt('Hvad skal det nye navn være', this.model.get('name'));

        if ( !newTaskNavn ) return;
        this.model.set('name', newTaskNavn);
    },      

    destroy: function() {
        this.model.destroy();

    },

    addCounter: function(e) {
        e.preventDefault();
        var newCounter = this.model.get('counter');
        this.model.set('counter', newCounter + 1);
    },

    remove: function() {
        this.$el.remove();
    },

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

//Collection View
App.Views.TasksView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {
        this.collection.on('add', this.addOne, this);
        this.render();
    },

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

    addOne: function(task) {
        var taskView = new App.Views.TaskView({ model: task });
        this.$el.append(taskView.render().el);

    }
});

App.Views.AddTask = Backbone.View.extend({
    el: '#addTask',

    initialize: function() {
    },

    events: {
        'submit' : 'submit'
    },

    submit: function(e) {
        e.preventDefault();
        var taskNavn = $(e.currentTarget).find('.navnClass').val(),
             uriNum =  $(e.currentTarget).find('.uriClass').val();

        if ( ! $.trim(taskNavn)) {

            var test =  prompt('opgaven skal have et navn', '');
            if ( ! $.trim(test)) return false;
                taskNavn = test;
        }

        if( uriNum.indexOf( "http://" ) == -1 ) {
                     addedValue = 'http://',
                     uriNum = addedValue + uriNum;
        }

        $(e.currentTarget).find('input[type=text]').val('').focus();
        //var task = new App.Models.Task({ name: taskNavn, uri: uriNum });
        this.collection.add({ name: taskNavn, uri: uriNum });
    }

});


// new tasks collection
var tasks = new App.Collections.Tasks([
{
    name: 'Foo',
    uri: 'www.google.com',
    counter: 3
},
{   
    name: 'Bar',
    uri: 'http://google.com',
    counter: 2
},
{
    name: 'Baz',
    uri: 'http://www.google.com',
    counter: 1
}
]);

 // tasks.comparator = function(task) {
 // return task.get("counter");
 // };  
 tasks.sort();

// new collection view (add)
var addTaskView = new App.Views.AddTask({ collection: tasks});

// new collection view
var tasksView = new App.Views.TasksView({ collection: tasks });
$('.tasks').html(tasksView.el);

})();

My HTML: (if someone wanna try to replicate the scenario 🙂

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>LinkList</title>
</head>
<body>

<h1>Mine opgaver</h1>
<form action="" id="addTask">
    <input class="navnClass" type="text" placeholder="Link name"><input clas s="uriClass" type="text" placeholder="www.url-here.com">
    <button class="nyOpgave">Ny opgave</button><br />

</form>

<div class="tasks">
    <script type="text/template" id="Tasks">
        <span class="linkNavn"><%= name %></span> - <a href="<%= uri %>" class="uriLink" target="_blank"><%= uri %></a> : [<span class="counterClass"><%= counter %></span>] <button class="edit">Edit</button> <button class="delete">Delete</button>
    </script>
</div>
<script src="js/underscore.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="js/jquery.js"></script>
<script src="js/backbone.js"></script>
<script src="main.js"></script>

</body>
</html>

can anyone please help me figure this one out ?

/Cheers
Marcel

Answer 1

Okay , i have created the application for you , as you have intended it to run.I’m going to try and explain you the entire code , what i have written and why i have written.

First , take a look at the JSfiddle : here

Next , let me explain :

1.This is my model that stores the name of the link , href , the id(not used in my example but its just good practise to assign a unique id to each model) and finally the number of clicks to a link(model).

var myModel = Backbone.Model.extend({
    defaults:{
        'id' : 0,
        'name' : null,
        'link' : '#',
        'clicks' : 0
    }
});

2.This the collection , that stores all my models , i have added a comparator function so that when ever you add a model to a collection , it will sort the collection.

Note : i have added a - sign to sort the collection in descending order of clicks (link with maximum click to appear first)

var myCollection = Backbone.Collection.extend({
        model: myModel,
        comparator: function(item) {
            return -item.get('clicks');
        }
    });

3.Now this is my main view , what do i mean main view ? This view does the main rendering of the list , that you want to show.Pretty self explanatory code here.One thing , the this.coll.bind('add change',this.render,this) , i have added a ‘change’ because whenever any of the models in this collection change , we want to re-render the entire list , this happens when i change the count of any link , on clicking it , i want to re-render the entire list.

var myView = Backbone.View.extend({
    el: $("#someElement"),
    tagName : 'ul',

    initialize: function() {
        this.coll = new myCollection();
        this.coll.bind('add change',this.render,this);
    },

    events: {
        "click #add": "add"
    },

    add: function(e){
        e.preventDefault();
        var mod = new myModel();
        var name = $('#name').val();
        var link = $('#link').val();
        mod.set({'id':mod.cid, 'name':name,'link':link});                    
        this.coll.add(mod);

    },

    render : function(){

        $('#list').empty();
        this.coll.sort();
        this.coll.forEach(function(model){
            var listItem = new printView({ model: model});
            $('#list').append(listItem.render().el);
        });
    }
});

4.This is my sub-view , why do i ever make a second view , why isnt 1 view sufficient ?
Well this consider a scenario, with every link you have a delete button (for instance) when i click the delete button (and i have just 1 view) how do i identify which model to destroy(remove from collection ? ) , 1 possible way would be to associate a cid with each model and then on click i can do a this.coll.getByCid() , but this isnt such a good way to do it , IMHO , so i created a separate view for each model.This View renders each model and returns nothing more.

var printView = Backbone.View.extend({

    tagName: 'li',

    initialize : function(options) {
        _.bindAll(this, "render");                   
    },

    events:{
        "click a": "count"
    },

    render:function(){
        var linkName = this.model.get("name");
        var link= this.model.get("link");
        var clicks = this.model.get("clicks");

        this.$el.append("<a class='link' href='"+link+"'>"+linkName+"</a> ("+clicks+")");

        return this;
    },

    count:function(e){
        e.preventDefault();
        e.stopPropagation();
        var clicks = this.model.get("clicks");
        clicks++;
        this.model.set({'clicks':clicks});
    }

});

5.Initializing my (main) myView

new myView();

Note: I do believe that this application/code can be written in much better way , with several improvements but with my calibre and with the fact that it works ( :p ) i think it can help you.