https://github.com/ripjar/backbone.assign

Memory conscious Backbone views.
https://github.com/ripjar/backbone.assign

Last synced: about 1 year ago
JSON representation

Memory conscious Backbone views.

• Host: GitHub
• URL: https://github.com/ripjar/backbone.assign
• Owner: ripjar
• Created: 2016-01-26T19:31:12.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-22T14:55:11.000Z (almost 10 years ago)
• Last Synced: 2025-03-14T11:41:24.283Z (over 1 year ago)
• Language: JavaScript
• Size: 592 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# backbone.assign

A micro library for creating memory conciencious Backbone views.

# Reasoning 

In long-lived, single page web-apps, the importance of maintaining a zero memory footprint is high. Although performing various cleanup operations,vanilla Backbone does not allow for views to easily manage the state of their sub-views. This makes it difficult to ensure that when views are destroyed they efficiently and completely cleanup all event handlers and elements they have created and delegated.

# Installation 

    npm install backbone.assign

# Usage

Backbone.assign is provided as an ES6 module;

    import ParentView from "backbone.assign";

Using Backbone.assign, sub-views are assigned to a child element, and then rendered implicitly. This allows backbone.assign and the parent view to manage the state of all of it's sub-views. An example view assignment may be as follows;

    const PageView = ParentView.extend({

        initialize(options) {

            // create a view

            this.listView = new ListView();

        },

        render() {

            // render and append the view

            // to the .list element

            this.assign({

                '.list': this.listView

            });

        }

    });

# Assumptions

In order for backbone.assign to work effectively without intervention, two asumptionns are made;

1. **All events will be delegated from the root element of the view.**

   This can be achieved by using the `events` object exclusively, or by delegating events from `this.el`.

2. **The `render` function will not alter the view's root element.**   

# Events

| Event Name        | Description   |

| ------------------|---------------| 

| `onBeforeRender`  | called immediately before the view is rendered |

| `onRender`        | called immediately after the view is rendered  |

| `onBeforeClose`   | called immediately before the view is closed   |

| `onClose`         | called immediately after the view is closed    |

# Additional cleanup

To perform any additional cleanup of memory an `onClose` method is exposed. The `onClose` function will be called after the `onBeforeClose` event, but before memory cleanup. This 

### Preventing final cleanup

Returning `false` from the `onClose` function will rekindle the view, preventing cleanup from being finalized. 

# Drawbacks

# License