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?

Answer 1

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

Answer 2

Thanks to chazsolo for the answer, all the info is there. So, I'll write the code that worked just in case someone finds it useful someday:

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

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