Home/ Questions/Q 4240412
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T03:09:40+00:00

Hope you can have a quick look at what I’m doing here. Essentially, am

  • 0

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();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
}
    • 0