<commit_before># Backbone.BaseView

Backbone.BaseView is a subclass of Backbone.View that helps with the most common tasks of managing views.

Generally most Backbone views have a similar lifecycle, it usually consists of rendering a template, responding to DOM events, updating elements and managing several subviews. BaseView is designed to remove some of the boilerplate associated with these tasks while retaining the flexibility that Backbone is known for.


## Getting started

BaseView is inherited like any other Backbone class by using the `extend` function. Below is an example of the most common methods you might want to override. It's a good place to start if you want to copy and paste an example to get up and running.

##### Example usage

```javascript
var MyView = Backbone.BaseView.extend({
  // initialize is usually a good place to set up model listeners and create subviews
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.formView = new FormView(); // FormView also inherits from BaseView
  },

  // A hash of references to DOM elements, available to use after rendering (eg: this.$message)
  elements: {
    '$message': 'p',
    '$formContainer': '.formContainer'
  },

  // Must return a compiled template function, eg from Underscore, Handlebars, Mustache, etc
  template: function() {
    return Handlebars.compile('<p>Hello {{user.name}}, you are {{age}} years old</p><div class=".formContainer"></div>');
  },

  // The data object that'll be sent to the template when rendering
  templateData: function() {
    return {
      user: this.model,
      age: (new Date()).getFullYear() - this.model.dob.getFullYear()
    };
  },

  // Called automatically after rendering
  afterRender: function() {
    // Use the element references to access DOM elements
    this.$message('color', 'red');
    // Attach the subview to the container element, this will also automatically render it
    this.formView.appendTo(this.$formContainer);
  }
});
```

```javascript
// Create a new instance of the view and give it a model
var myView = new MyView({
  model: new Backbone.Model({
    name: 'Matt',
    dob: new Date('1980-01-01')
  });
});

// Attach the view to the DOM, this will also automatically render it
myView.appendTo('body');
```

Several concepts are introduced in this example. The most important thing to recognise is there's no `render` function - the rendering process is automated and uses the template information provided in the class definition. The other important point to make is that views are attached to the DOM using `appendTo`, which is a function provided by BaseView that helps with nested view management.


## Specifying templates and data

Out in the wild the majority of Backbone views tend to render a single template, and it's generally inserted into `View.$el`. This usually leads to the same rendering code being written over and over again. BaseView is designed to reduce this repetition and add a bit of structure:

```javascript
var MyView = Backbone.BaseView.extend({
  template: function() {
    // Must return a compiled template function, i.e. from Underscore, Handlebars, etc.
    return Handlebars.compile('<p>Hello</p>');
  },
  templateData: function() {
    // Return the object you want sent to the template when it's rendered
    // (this is an optional function, the template can still be rendered without it)
    return {
      user: this.model,
      age: (new Date()).getFullYear() - this.model.dob.getFullYear()
    };
  }<commit_msg>Fixed a couple of missed references to the update about rendering in the readme<commit_after># Backbone.BaseView

Backbone.BaseView is a subclass of Backbone.View that helps with the most common tasks of managing views.

Generally most Backbone views have a similar lifecycle, it usually consists of rendering a template, responding to DOM events, updating elements and managing several subviews. BaseView is designed to remove some of the boilerplate associated with these tasks while retaining the flexibility that Backbone is known for.


## Getting started

BaseView is inherited like any other Backbone class by using the `extend` function. Below is an example of the most common methods you might want to override. It's a good place to start if you want to copy and paste an example to get up and running.

##### Example usage

```javascript
var MyView = Backbone.BaseView.extend({
  // initialize is usually a good place to set up model listeners and create subviews
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.formView = new FormView(); // FormView also inherits from BaseView
  },

  // A hash of references to DOM elements, available to use after rendering (eg: this.$message)
  elements: {
    '$message': 'p',
    '$formContainer': '.formContainer'
  },

  // Must return a compiled template function, eg from Underscore, Handlebars, Mustache, etc
  template: function() {
    return Handlebars.compile('<p>Hello {{user.name}}, you are {{age}} years old</p><div class=".formContainer"></div>');
  },

  // The data object that'll be sent to the template when rendering
  templateData: function() {
    return {
      user: this.model,
      age: (new Date()).getFullYear() - this.model.dob.getFullYear()
    };
  },

  // Called automatically after rendering
  afterRender: function() {
    // Use the element references to access DOM elements
    this.$message('color', 'red');
    // Attach the subview to the container element and render it
    this.formView.appendTo(this.$formContainer).render();
  }
});
```

```javascript
// Create a new instance of the view and give it a model
var myView = new MyView({
  model: new Backbone.Model({
    name: 'Matt',
    dob: new Date('1980-01-01')
  });
});

// Attach the view to the DOM and render it
myView.appendTo('body').render();
```

Several concepts are introduced in this example. The most important thing to recognise is there's no `render` function defined in the class - the rendering process is automated and uses the information provided in the `template` and `templateData` properties. The other important point to make is that views are attached to the DOM using `appendTo`, which is a function provided by BaseView that helps with nested view management.


## Specifying templates and data

Out in the wild the majority of Backbone views tend to render a single template, and it's generally inserted into `View.$el`. This usually leads to the same rendering code being written over and over again. BaseView is designed to reduce this repetition and add a bit of structure:

```javascript
var MyView = Backbone.BaseView.extend({
  template: function() {
    // Must return a compiled template function, i.e. from Underscore, Handlebars, etc.
    return Handlebars.compile('<p>Hello</p>');
  },
  templateData: function() {
    // Return the object you want sent to the template when it's rendered
    // (this is an optional function, the template can still be rendered without it)
    return {
      user: this.model,
      age: (new Date()).getFullYear() - this.model.dob.getFullYear()
    };
  }
{'fraction_non_alphanumeric': 0.09014792073681273, 'fraction_numerical': 0.0022327658386826683, 'mean_word_length': 3.852403520649966, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2666843', 'n_tokens_mistral': 1879, 'n_tokens_neox': 1809, 'n_words': 900}