Question

When the view is initialized, how can I bind the model to the specific View that is created? The view is current initialized at the start of the application. Also, how can I bind the model to the collection?
(function ($) { //loads at the dom everything

//Creation, Edit, Deletion, Date
var Note = Backbone.Model.extend({
    defaults: {
        text: "write here...",
        done: false
    },

    initialize: function (){
        if(!this.get("text")){
            this.set({"text": this.default.text});
        }
    },

    edit: function (){
        this.save({done: !this.get("done")});
    },

    clear: function (){
        this.destroy();
    }
});

var NoteList = Backbone.Collection.extend({
    model:Note
});

var NoteView = Backbone.View.extend ({
    el: "body",

    initialize: function(){
        alert("initialized");
        var list = new NoteList;    
        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;
        this.push(note);
        alert("noted");
    }
});

var ninja = new NoteView;

})(jQuery);

Answer 1

Update

I just took a look at @James Woodruff’s answer, and that prompted me to take another look at your code. I didn’t look closely enough the first time, but I’m still not sure what you’re asking. If you’re asking how to have a model or view listen for and handle events triggered on the other, then check out James’s example of calling bind() to have the view listen for change (or change:attr) events on the model (although I’d recommend using on() instead of bind(), depending what version of Backbone you’re using).

But based on looking at your code again, I’ve revised my answer, because I see some things you’re trying to do in ways that don’t make sense, so maybe that’s what you’re asking about.

New Answer

Here’s the code from your question, with comments added by me:

var NoteView = Backbone.View.extend ({

    // JMM: This doesn't make sense. You wouldn't normally pass `el`
    // to extend(). I think what you really mean here is
    // passing el : $( "body" )[0] to your constructor when you
    // instantiate the view, as there can only be one BODY element.

    el: "body",

    initialize: function(){
        alert("initialized");

        // JMM: the next 2 lines of code won't accomplish anything.
        // Your NoteList object will just disappear into thin air.
        // Probably what you want is one of the following:
        // this.collection = new NoteList;
        // this.list = new NoteList;
        // this.options.list = new NoteList;

        var list = new NoteList;    

        // Returning something from initialize() won't normally
        // have any effect.        

        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;

        // JMM: the way you have your code setup, `this` will be
        // your view object when createNote() is called. Depending
        // what variable you store the NoteList object in (see above),
        // you want something here like:
        // this.collection.push( note ).

        this.push(note);
        alert("noted");
    }
});

Here is a revised version of your code incorporating changes to the things I commented on:

var NoteView = Backbone.View.extend( {

  initialize : function () {

    this.collection = new NoteList;    

  },
  // initialize


  events : {

    "click #lol" : "createNote"

  },
  // events


  createNote : function () {

    this.collection.push( new Note );

    // Or, because you've set the `model` property of your
    // collection class, you can just pass in attrs.

    this.collection.push( {} );

  }
  // createNote

} );


var note = new NoteView( { el : $( "body" )[0] } );