<commit_before># Documentation

## Introduction

human-view is a 

## Bindings

Bindings are view-level objects that map model properties to specific DOM selectors in the view's template. human-view will automatically update the appropriate DOM elements or attributes when the applicable model property changes.

### textBindings
Text bindings are used to directly bind the inner text of an element to the model.

```js
textBindings: {
	'liveStreamCount': '.live-stream-count'
} 
```
```html
<div class='.live-stream-count'>0</div>
```

Here, the contents of all the `.liveStreamCount` elements will be replaced with and bound to the value of `view.liveStreamCount`.

### srcBindings
Source bindings are used to bind the `src` attribute of a DOM element to the model.

```js
srcBindings: {
	'userProfilePic': 'img .profile-pic'
}
```
```html
<img class='profile-pic' src='' alt='Profile Picture' />
```

Here, the `src` tag of the `.profile-pic` image element will be bound to `view.userProfilePic`.

### hrefBindings
href bindings are just like the src bindings, but for the `href` attribute.

```js
hrefBindings: {
	'logoutURL': 'a .logout'
}
```
```html
<a class='logout' href=''>Logout</a>
```

Here, the `href` tag of the `.logout` anchor element will be bound to `view.logoutURL`.

### classBindings
Class bindings maintain a class on the element according to the following rules:
    
1. **If the bound property is a boolean**: the name of the property will be used as the name of the class. The class will be on the element when true, and removed when the propety is false.
2. **If the property is a string**: the current value of the property will be used as the class name. When the property value changes the previous class will be removed and be replaced by the current value. No other classes on that element will be disturbed.

Assuming that `view.active` is a boolean: 

```js
hrefBindings: {
	'active': 'a .options-page'
}
```
```html
<a class='options-page' href=''>Options</a>
```

When `active` is set to `true`, a class named `active` will be added to the `.options-page` element.

## Methods

### renderCollection(collection, ViewClass, container [, opts])
human-view includes a `renderCollection` method that works as follows:

```js
// some view for individual items in the collection
var ItemView = StrictView.extend({ ... });

// the main view
var MainView = StrictView.extend({
    template: '<section class="page"><ul class="itemContainer"></ul></section>',
    render: function (opts) {
        // render our template as usual
        this.renderAndBind();
        
        // call renderCollection with these arguments:
        // 1. collection
        // 2. which view to use for each item in the list
        // 3. which element within this view to use as the container
        // 4. options object (not required):
        //      {
        //          // function used to determine if model should be included
        //          filter: function (model) {},<commit_msg>update docs a bit<commit_after># Documentation

## Introduction

human-view is a 

## Bindings

Bindings are view-level objects that map model properties to specific DOM selectors in the view's template. Once bindings are declared, human-view will automatically update the appropriate DOM elements or attributes when the bound model property changes.


### textBindings

Text bindings are used to directly bind the inner text of an element to the model.

```js
textBindings: {
	'liveStreamCount': '.live-stream-count'
} 
```
```html
<div class='.live-stream-count'>0</div>
```

Here, the contents of the `.liveStreamCount` element (or elements) within the view will be replaced with and bound to the value retrived by `model.get('liveStreamCount')`.


### srcBindings

Source bindings are used to bind the `src` attribute of a DOM element to the model.

```js
srcBindings: {
	'userProfilePic': 'img .profile-pic'
}
```
```html
<img class='profile-pic' src='' alt='Profile Picture' />
```

Here, the `src` tag of the `.profile-pic` image element will be bound to `model.get('userProfilePic')`.


### hrefBindings

You're probably getting the idea by now, but href bindings are just like the src bindings, but for the `href` attribute.

```js
hrefBindings: {
	'logoutURL': 'a .logout'
}
```
```html
<a class='logout' href=''>Logout</a>
```

Here, the `href` tag of the `.logout` anchor element will be bound to `model.get('logoutURL')`.


### classBindings

Class bindings are a bit special. They maintain a class on the element according to the following rules:
    
1. **If the bound property is a boolean**: the name of the property will be used as the name of the class. The class will be present on the element when the boolean is `true`, and removed when the propety is `false`.

```js
// within your view definition
classBindings: {
    'active': 'a .options-page'
}
```
```html
<a class='options-page' href=''>Options</a>
```

```js
// some other code
model.set('active', true); // element with have `active` class

model.set('active', false); // `active` class will be removed (if present)
```


2. **If the property is a string**: the current value of the property will be used as the class name. When the property value changes the previous class will be removed and be replaced by the current value. No other classes on that element will be disturbed.


```js
// within your view definition
classBindings: {
    'status': 'a .options-page'
}
```
```html
<a class='options-page' href=''>Options</a>
```

```js
// some other code
model.set('status', 'available'); // element with have an `available` class

// when setting to something else 
model.set('status', 'away'); // `available` class will be removed and `away` class added.
```


## Methods

### renderCollection(collection, ViewClass, container [, opts])
human-view includes a `renderCollection` method that works as follows:

```js
// some view for individual items in the collection
var ItemView = StrictView.extend({ ... });

// the main view
var MainView = StrictView.extend({
    template: '<section class="page"><ul class="itemContainer"></ul></section>',
    render: function (opts) {
        // render our template as usual
        this.renderAndBind();
        
        // call renderCollection with these arguments:
        // 1. collection
        // 2. which view to use for each item in the list
        // 3. which element within this view to use as the container
        // 4. options object (not required):
        //      {
        //          // function used to determine if model should be included
        //          filter: function (model) {},
{'fraction_non_alphanumeric': 0.1176913803496082, 'fraction_numerical': 0.002109704641350211, 'mean_word_length': 3.5490061686086363, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, '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': '3410234', 'n_tokens_mistral': 1894, 'n_tokens_neox': 1812, 'n_words': 837}