<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Ampersand.js, Javascript, ampersand, Node.js, Apps, HTML5">
    <meta name="author" content="Get started with Ampersand.js">
    <title>Ampersand.js - Learn</title>
    <link rel="stylesheet" href="//cloud.typography.com/7773252/613684/css/fonts.css">
    <link rel="stylesheet" href="/public/css/normalize.min.css">
    <link rel="stylesheet" href="/public/css/main.css">
    <script>
      !function(g,s,q,r,d){r=g[r]=g[r]||function(){(r.q=r.q||[]).push(
      arguments)};d=s.createElement(q);q=s.getElementsByTagName(q)[0];
      d.src='//d1l6p2sc9645hc.cloudfront.net/tracker.js';q.parentNode.
      insertBefore(d,q)}(window,document,'script','_gs');
      _gs('GSN-375569-B', false);
      _gs('set', 'cookieDomain', '.ampersandjs.com');
      _gs('track');
    </script>
  </head>
  <body class="docs-page">
    <nav class="nav-main cf"><a href="/" class="logo logo-ampersand">Ampersand.js</a><a href="/learn" class="nav-item active">Learn</a><a href="/docs" class="nav-item">Docs</a><a href="http://tools.ampersandjs.com" class="nav-item external">Find Modules</a><a href="/contribute" class="nav-item">Contribute</a><a href="/learn/quick-start-guide/" class="button button-primary">Get Started</a></nav>
    <div class="docs cf">
      <nav class="nav-docs"><a href="/" class="logo logo-ampersand"></a><a href="/learn/" class="section-top">Guides</a><a href="/learn/quick-start-guide" class="section-sub">Quick Start Guide</a><a href="/learn/npm-browserify-and-modules" class="section-sub">npm, Browserify &amp; Modules</a><a href="/learn/transitioning-from-backbone" class="section-sub">Transitioning from Backbone</a><a href="/learn/state" class="section-sub">Understanding State</a><a href="/learn/data-bindings-in-views" class="section-sub">Data and bindings in views</a><a href="/learn/templates" class="section-sub">Templates</a><a href="/learn/events" class="section-sub">Events in Ampersand</a><a href="/learn/base-objects-and-mixins" class="section-sub">Base Objects &amp; Mixins</a><a href="/learn/data-hook-attribute" class="section-sub">Using the `data-hook` Attribute</a><a href="/learn/view-conventions" class="section-sub active">View Conventions</a><a href="/learn/migrating-human-model-view" class="section-sub">Migrating from HumanModel/View</a><a href="/learn/forms" class="section-sub">Working with forms</a>
      </nav>
      <div class="docs-content">
        <section><a name="ampersand-view-conventions" class="anchor" href="#ampersand-view-conventions"><h1><span class="header-link"></span>Ampersand View Conventions</h1></a><a name="what-is-a-view-according-to-ampersand" class="anchor" href="#what-is-a-view-according-to-ampersand"><h2><span class="header-link"></span>What is a view according to ampersand?</h2></a><p>The core purpose of a view is to manage the contents, events, and behavior or a single DOM element.</p>
<p>It doesn&#39;t matter if your &quot;view&quot; is an instance of <code>ampersand-view</code> or not. <em>Any</em> object can be a view if it follows a few rules.</p>
<p>Following these rules ensure that that your view plays nicely with other views.</p>
<p>The rules are:</p>
<ul>
<li>All views accept an <code>options</code> object as the first argument to their constructor.</li>
<li>All views should have an <code>el</code> property, that is the dom element that the view manages.</li>
<li>If the constructor&#39;s options object has an <code>el</code> property, it should be used as the view&#39;s <code>el</code>.</li>
<li>All views should have a <code>render</code> method that creates, replaces, or fills in the <code>el</code> property.</li>
<li>It should have a <code>remove</code> method that tears down the view, removes any event handlers, and ideally removes <code>el</code> from it&#39;s parent (if that&#39;s a reasonable thing to do).</li>
</ul>
<a name="the-rules-are-most-easily-explained-by-an-example" class="anchor" href="#the-rules-are-most-easily-explained-by-an-example"><h2><span class="header-link"></span>The rules are most easily explained by an example</h2></a><p>Here is an absolutely bare-minimum <code>view</code>. Please see the comments.</p>
<pre><code class="undefinedjs">function MinimalView(options) {
    // If given an element as part of an options object
    // the view *should* store an element as `this.el`.
    this.el = options.el;
}

// All views should have a `render` method that creates, replaces, or 
// fills in the `this.el` property.
// If passed in when created this view may already have a `this.el`. 
// If so, your render would method would populate it, or create a new
// one and replace it (if already part of the DOM tree).
MinimalView.prototype.render = function () {
    // The important thing is after calling `render` the view should have
    // a `this.el` that is a *real* DOM element.
    this.el.textContent = &#39;hello, awesome developer!&#39;;
};

// It should have a `remove` method that does any tear down you may want
// to do. Including ideally removing itself from it&#39;s parent (if reasonable to do so)
MinimalView.prototype.remove = function () {
    // you could do it with vanilla JavaScript like this
    var parent = this.el.parentNode;
    if (parent) parent.removeChild(this.el);

    // ...or if you&#39;re using jQUery you could just do
    $(this.el).remove();
};
</code></pre>
<a name="that39s-it" class="anchor" href="#that39s-it"><h2><span class="header-link"></span>that&#39;s it!</h2></a></section>
      </div><a href="/learn" class="back">Back to Guides</a>
    </div>
    <footer class="footer-main">
      <nav class="nav-footer"><a href="/learn" class="nav-item">Learn</a><a href="/docs" class="nav-item">Docs</a><a href="http://tools.ampersandjs.com" class="nav-item">Find Modules</a><a href="/contribute" class="nav-item">Contribute</a><a href="https://github.com/ampersandjs" class="nav-item">Github</a><a href="https://twitter.com/ampersandjs" class="nav-item">Twitter</a></nav>
      <p>Sponsored by <a href="https://andyet.com">&amp;yet </a><br>with the help of our <a href="/contribute">contributors</a></p><a href="/" class="logo logo-ampersand-gray">&amp;</a>
    </footer>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-44685415-1', 'humanjavascript.com');
      ga('send', 'pageview');
      
    </script>
    <script src="/public/js/highlight.pack.js"></script>
    <script>
      hljs.configure({classPrefix: ''});
      hljs.initHighlightingOnLoad();
      
    </script>
  </body>
</html><commit_msg>Fixed a couple typos<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Ampersand.js, Javascript, ampersand, Node.js, Apps, HTML5">
    <meta name="author" content="Get started with Ampersand.js">
    <title>Ampersand.js - Learn</title>
    <link rel="stylesheet" href="//cloud.typography.com/7773252/613684/css/fonts.css">
    <link rel="stylesheet" href="/public/css/normalize.min.css">
    <link rel="stylesheet" href="/public/css/main.css">
    <script>
      !function(g,s,q,r,d){r=g[r]=g[r]||function(){(r.q=r.q||[]).push(
      arguments)};d=s.createElement(q);q=s.getElementsByTagName(q)[0];
      d.src='//d1l6p2sc9645hc.cloudfront.net/tracker.js';q.parentNode.
      insertBefore(d,q)}(window,document,'script','_gs');
      _gs('GSN-375569-B', false);
      _gs('set', 'cookieDomain', '.ampersandjs.com');
      _gs('track');
    </script>
  </head>
  <body class="docs-page">
    <nav class="nav-main cf"><a href="/" class="logo logo-ampersand">Ampersand.js</a><a href="/learn" class="nav-item active">Learn</a><a href="/docs" class="nav-item">Docs</a><a href="http://tools.ampersandjs.com" class="nav-item external">Find Modules</a><a href="/contribute" class="nav-item">Contribute</a><a href="/learn/quick-start-guide/" class="button button-primary">Get Started</a></nav>
    <div class="docs cf">
      <nav class="nav-docs"><a href="/" class="logo logo-ampersand"></a><a href="/learn/" class="section-top">Guides</a><a href="/learn/quick-start-guide" class="section-sub">Quick Start Guide</a><a href="/learn/npm-browserify-and-modules" class="section-sub">npm, Browserify &amp; Modules</a><a href="/learn/transitioning-from-backbone" class="section-sub">Transitioning from Backbone</a><a href="/learn/state" class="section-sub">Understanding State</a><a href="/learn/data-bindings-in-views" class="section-sub">Data and bindings in views</a><a href="/learn/templates" class="section-sub">Templates</a><a href="/learn/events" class="section-sub">Events in Ampersand</a><a href="/learn/base-objects-and-mixins" class="section-sub">Base Objects &amp; Mixins</a><a href="/learn/data-hook-attribute" class="section-sub">Using the `data-hook` Attribute</a><a href="/learn/view-conventions" class="section-sub active">View Conventions</a><a href="/learn/migrating-human-model-view" class="section-sub">Migrating from HumanModel/View</a><a href="/learn/forms" class="section-sub">Working with forms</a>
      </nav>
      <div class="docs-content">
        <section><a name="ampersand-view-conventions" class="anchor" href="#ampersand-view-conventions"><h1><span class="header-link"></span>Ampersand View Conventions</h1></a><a name="what-is-a-view-according-to-ampersand" class="anchor" href="#what-is-a-view-according-to-ampersand"><h2><span class="header-link"></span>What is a view according to ampersand?</h2></a><p>The core purpose of a view is to manage the contents, events, and behavior of a single DOM element.</p>
<p>It doesn&#39;t matter if your &quot;view&quot; is an instance of <code>ampersand-view</code> or not. <em>Any</em> object can be a view if it follows a few rules.</p>
<p>Following these rules ensure that that your view plays nicely with other views.</p>
<p>The rules are:</p>
<ul>
<li>All views accept an <code>options</code> object as the first argument to their constructor.</li>
<li>All views should have an <code>el</code> property, that is the dom element that the view manages.</li>
<li>If the constructor&#39;s options object has an <code>el</code> property, it should be used as the view&#39;s <code>el</code>.</li>
<li>All views should have a <code>render</code> method that creates, replaces, or fills in the <code>el</code> property.</li>
<li>It should have a <code>remove</code> method that tears down the view, removes any event handlers, and ideally removes <code>el</code> from its parent (if that&#39;s a reasonable thing to do).</li>
</ul>
<a name="the-rules-are-most-easily-explained-by-an-example" class="anchor" href="#the-rules-are-most-easily-explained-by-an-example"><h2><span class="header-link"></span>The rules are most easily explained by an example</h2></a><p>Here is an absolutely bare-minimum <code>view</code>. Please see the comments.</p>
<pre><code class="undefinedjs">function MinimalView(options) {
    // If given an element as part of an options object
    // the view *should* store an element as `this.el`.
    this.el = options.el;
}

// All views should have a `render` method that creates, replaces, or 
// fills in the `this.el` property.
// If passed in when created this view may already have a `this.el`. 
// If so, your render would method would populate it, or create a new
// one and replace it (if already part of the DOM tree).
MinimalView.prototype.render = function () {
    // The important thing is after calling `render` the view should have
    // a `this.el` that is a *real* DOM element.
    this.el.textContent = &#39;hello, awesome developer!&#39;;
};

// It should have a `remove` method that does any tear down you may want
// to do. Including ideally removing itself from it&#39;s parent (if reasonable to do so)
MinimalView.prototype.remove = function () {
    // you could do it with vanilla JavaScript like this
    var parent = this.el.parentNode;
    if (parent) parent.removeChild(this.el);

    // ...or if you&#39;re using jQUery you could just do
    $(this.el).remove();
};
</code></pre>
<a name="that39s-it" class="anchor" href="#that39s-it"><h2><span class="header-link"></span>that&#39;s it!</h2></a></section>
      </div><a href="/learn" class="back">Back to Guides</a>
    </div>
    <footer class="footer-main">
      <nav class="nav-footer"><a href="/learn" class="nav-item">Learn</a><a href="/docs" class="nav-item">Docs</a><a href="http://tools.ampersandjs.com" class="nav-item">Find Modules</a><a href="/contribute" class="nav-item">Contribute</a><a href="https://github.com/ampersandjs" class="nav-item">Github</a><a href="https://twitter.com/ampersandjs" class="nav-item">Twitter</a></nav>
      <p>Sponsored by <a href="https://andyet.com">&amp;yet </a><br>with the help of our <a href="/contribute">contributors</a></p><a href="/" class="logo logo-ampersand-gray">&amp;</a>
    </footer>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-44685415-1', 'humanjavascript.com');
      ga('send', 'pageview');
      
    </script>
    <script src="/public/js/highlight.pack.js"></script>
    <script>
      hljs.configure({classPrefix: ''});
      hljs.initHighlightingOnLoad();
      
    </script>
  </body>
</html>

{'fraction_non_alphanumeric': 0.19147127576680598, 'fraction_numerical': 0.0103421406814479, 'mean_word_length': 4.672157492969064, 'pattern_counts': {'":': 0, '<': 351, '<?xml version=': 0, '>': 351, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, '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': '1862716', 'n_tokens_mistral': 4812, 'n_tokens_neox': 4664, 'n_words': 1100}