Passing arguments to a backbone view

backbone.js, collections, javascript, view

Solution

You should pass attributes in the `initialize()` function:

initialize: function (attrs) {
    this.options = attrs;
}

So here you would pass the attributes as an object, like so:

new MyView({
  some: "something",
  that: "something else"
})

Now you have the values that you passed in accessible throughout this instance, in this.options

console.log(this.options.some) # "something"
console.log(this.options.that) # "something else"

To pass in a collection, I recommend making one parent view and one subview:

var View;
var Subview;

View = Backbone.View.extend({
    initialize: function() {
        try {
            if (!(this.collection instanceof Backbone.Collection)) {
                throw new typeError("this.collection not instanceof Backbone.Collection")
            }
            this.subViews = [];
            this.collection.forEach(function (model) {
                this.subViews.push(new SubView({model: model}));
            });
        } catch (e) {
            console.error(e)
        }
    },
    render: function() {
        this.subViews.forEach(function (view) {
            this.$el.append(view.render().$el);
        }, this);
        return this;
    }
});

SubView = Backbone.View.extend({
    initialize: function () {
        try {
            if (!(this.model instanceof Backbone.model)) {
                throw new typeError("this.collection not instanceof Backbone.Collection")
            }
        } catch (e) {
            console.error(e);
        }
    },
    render: function () {
        return this;
    }
});

testCollection = new MyCollection();
collectionView = new View({collection: testCollection});
$("body").html(collectionView.render().$el);

You should always handle the Models of a Collection, not just the data of the collection.

Problem

Just getting started with Backbone. I have a generic view that can render a collection as a list with a title. I'm currently passing the collection and title into the render method, but that seems a bit odd. Is there another way that's more canonical? E.g.: ``` var ListView = Backbone.View.extend({ template: _.template([ "<div>", "<% if (title) { %><h2><%= title %></h2> <% } %>", "<% if (items.length > 0) { %>", "<ul>", "<% items.each(function(item) { %>", "<%= itemTemplate(item) %>", "<% }); %>", "</ul>", "<% } else { %><p>None.</p><% } %>", "</div>" ].join('')), itemTemplate: _.template( "<li><%= attributes.name %> (<%= id %>)</li>" ), render: function(items, title) { var html = this.template({ items: items /* a collection */, title : title || '', itemTemplate: this.itemTemplate }); $(this.el).append(html); } }); var myView = new ListView({ el: $('#target') }); myView.render(myThings, 'My Things'); myView.render(otherThings, 'Other Things'); ```

Original source