CODEWITHSUNDEEP
javascriptjquerybackbone.js
littlejim84
littlejim84

Reputation: 9301

Backbone basic app, is this how it should be done?

Hope you can have a quick look at what I'm doing here. Essentially, am I doing it right?

Live demo of it here too: http://littlejim.co.uk/code/backbone/messing-around/

I just wanted to get a solid understanding in Backbone before I go too wild. So this is a simple demonstration of creating a collection from a JSON object, passing it to a view and handling simple events. But am I approaching this right? What can I do that's better?

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Showing a simple view with events</title>
    <script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
    <script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>

    <script type="text/javascript" src="application.js"></script>
</head>
<body>

    <header>
        <h1>Showing views from a collection and basic events</h1>
        <p>The list below is made from JSON, passed to the view as a collection and has basic events</p>
    </header>

    <article>

    </article>

</body>
</html>

Here is the JavaScript I currently have. I just need to know if I'm approaching this correctly?

window.App = {

    // namespaces
    Controller: {},
    Model : {},
    Collection : {},
    View : {},

    // code that starts when the app is first fired
    initialize : function () {

        var collection = new App.Collection.Inputs([
            {title: "Item 1"},
            {title: "Item 2"},
            {title: "Item 3"}
        ]);

        var view = new App.View.InputSet({collection: collection});
        $('article').html(view.render().el);

    }
}

/* 
Collection: Inputs */
App.Collection.Inputs = Backbone.Collection.extend();

/* 
View: _Input */
App.View._Input = Backbone.View.extend({
    events: {
        "click a": "close"
    },
    // called as soon as a view instance is made
    initialize: function() {
        // this makes the render, clear etc available at this
        // if not setting this, both render() and clear() method will not have themselves in this
        _.bindAll(this, "render", "close");
    },
    // backbone required method, which renders the UI
    render: function() {
        // this is using underscore templating, which can be passed context
        $(this.el).html(_.template('<p><%=title%> <a href="#">[close]</a></p>', this.model.toJSON()));
        return this;
    },
    close: function() {
        // removes the UI element from the page
        $(this.el).fadeOut(300);
        return false; // don't want click to actually happen
    }
});

/* 
View: InputSet, uses _Input */
App.View.InputSet = Backbone.View.extend({
    events: {
        'click a': 'clear'
    },
    initialize: function() {
        // this makes the render, clear etc available at this
        // if not setting this, both render() and clear() method will not have themselves in this
        _.bindAll(this, "render");
    },
    // backbone required method, which renders the UI
    render: function() {

        var that = this;

        views = this.collection.map(function(model) {
            var view = new App.View._Input({model: model});
            $(that.el).append(view.render().el);
            return view;
        });

        $(that.el).append('<a href="#">[clear]</a>');

        return this;
    },
    clear: function() {
        $(this.el).find('p').fadeOut(300);
    }
});

// wait for the dom to load
$(document).ready(function() {
    // this isn't backbone. this is running our earlier defined initialize in App
    App.initialize();
});

Upvotes: 4

Views: 2812

Answers (2)

Alex Korban
Alex Korban

Reputation: 15136

This looks fine to me. However, I found that things can get tricky once you start doing non-trivial stuff: complex views, nested collections etc.

One thing that could be done differently is that instead of generating input views using collection.map you could bind the collection's add event to a function that generates an _Input view for that item in the collection instead. So you'd have something like this in your InputSet view:

initialize: function() {
    _.bindAll(this, "addInput", "removeInput");
    this.collection.bind("add", this.addInput);
    this.collection.bind("remove", this.removeInput);
}

addInput: function(model) {
    var view = new App.View._Input({model: model});
    $(this.el).append(view.render().el);
}

Upvotes: 2

Andrew Hare
Andrew Hare

Reputation: 351688

I looks good to me - really the only thing I would suggest is that you bind the collection's 'change' event to _Input.render that way changes to your collection automatically re-render the view:

// called as soon as a view instance is made
initialize: function() {
  _.bindAll(this, "render", "close");
  this.collection.bind('change', this.render);
},

Other than that I think it looks good!

Upvotes: 0

Related Questions