Question

As part of preparation for an Interview I have been asked to read up on my MVC skills along with JavaScript which I believe will include Backbone and Spine Frame Works.

I have read a lot of websites but all sorts of different ways have been done and yet I cant fathom a simple example. So far I have the following…

A simple ‘cshtml’ file with a div and a button…

<div id="AuthorSection">
    <button id="sayhello">Add Author</button>
</div>

and an Author JS file which alerts me when it has rendered, but not when the event has been fired…

(function ($) {
Authors = Backbone.View.extend({

    el: $('#AuthorSection'),
    events: { 'click #AddAuthor': 'AddNewAuthor'
    },

    initialize: function () {
        _.bindAll(this, 'render', 'AddNewAuthor');
        this.render();
    },

    render: function () {
    },

    AddNewAuthor: function (e) {
        alert('Adding Author');
    }
});

var Authors = new Authors;

})(jQuery);

Any help would be appreciated for someone very new to this type of work….

Thanks

Answer 1

If your code is executed after the DOM is loaded, it should work as this Fiddle demonstrates http://jsfiddle.net/VcHn8/

On the other hand, if you execute your code before the DOM is loaded, $(‘#AuthorSection’) is unknown at the time. Remove the el declaration in your view and replace

var Authors = new Authors;

by

$(function(){
    new Authors( {el: $('#AuthorSection')} );
});

See http://jsfiddle.net/C5HXH/1/

And you should name your variables something different than the name of your constructor