Backbone.js set View attribute

Question

I'm kind of new to Backbone and I'm having trouble understanding how to set the attributes of a View. I'm using a view without a model.

This is the View:

var OperationErrorView = Backbone.View.extend({
    attributes: {},
    render: function(){
        var html = "<h3>" + this.attributes.get("error") +"</h3>";
        $(this.el).html(html);
    }
})

Then later on:

if (errors.length > 0){
    errors.forEach(function(error){
        // var errorView = new OperationErrorView({attributes: {"error": error} });          Doesn't work
        var errorView = new OperationErrorView();
        errorView.set({attributes: {"error": error}})
        errorView.render()
        $("#formAdd_errors").append(errorView.$el.html());
    });
}

Which is the correct approach to do this? Right now it doesn't work: When I try the method that is not commented out, it gives me the error TypeError: errorView.set is not a function, if I try it the first way, it just doesn't call the render() function.

UPDATE:

var OperationErrorView = Backbone.View.extend({
    attributes: {},
    initialize: function(attributes){
        this.attributes = attributes;
    },
    render: function(){
        var html = "<h3>" + this.attributes.get("error") +"</h3>";
        console.log("html");
        $(this.el).html(html);
    }
})

if (errors.length > 0){
        errors.forEach(function(error){
            console.log(error);
            var errorView = new OperationErrorView({"error": error});
            errorView.render()
            $("#formAdd_errors").append(errorView.$el.html());
        });
    }

I tried including this.render() in the initialize function. Doesn't work. Doesn't even call the render function. Why?

chazsolo chazsolo · Accepted Answer · 2014-12-10T20:32:33

A couple things:

set is not a function of a Backbone View. Check the API
In your commented code, calling new OperationErrorView(...) does not automatically evoke the render function. You have to do this manually.
The attributes property of the View does not have a get method. Again, Check the API

So, what should you do?

Research different ways to initialize a View with properties. Then figure out how to get those properties on the HTML that your View controls.

Here's a bit to get you started

var OperationErrorView = Backbone.View.extend({
    tagName: 'h3',

    initialize: function(attributes) {
        this.attributes = attributes;
        this.render();
    },

    render: function(){
        // attach attributes to this.$el, or this.el, here

        // insert the element into the DOM
        $('#formAdd_errors').append(this.$el);
    }
});

// later in your code
if ( errors.length > 0 ) {
    errors.forEach(function(error) {
        new OperationErrorView({ error: error });
    });
}

Backbone.js set View attribute

2 Answers