diff options
author | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-05-04 00:43:15 +1000 |
---|---|---|
committer | Thomas Davis <thomasalwyndavis@gmail.com> | 2011-05-04 00:43:15 +1000 |
commit | aba5e605d6039cec8c181c055873ca975debe89c (patch) | |
tree | dddfa47a21fadbb05a9dd9af44f66cd4f9036363 /_site/pygments/what-is-a-model | |
parent | a060c0ea806d789e924f7b3c73066eefcc7af7b7 (diff) | |
download | backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.zip backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.tar.gz backbonetutorials-aba5e605d6039cec8c181c055873ca975debe89c.tar.bz2 |
Removed the generated site files
Diffstat (limited to '_site/pygments/what-is-a-model')
-rw-r--r-- | _site/pygments/what-is-a-model/index.html | 260 |
1 files changed, 0 insertions, 260 deletions
diff --git a/_site/pygments/what-is-a-model/index.html b/_site/pygments/what-is-a-model/index.html deleted file mode 100644 index 4d59503..0000000 --- a/_site/pygments/what-is-a-model/index.html +++ /dev/null @@ -1,260 +0,0 @@ -<!DOCTYPE html> -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> -<head> - <meta http-equiv="content-type" content="text/html; charset=utf-8" /> - <title>What is a model? - Backbone.js Tutorials</title> -<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml"> - <meta name="author" content="Backbone Tutorials" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/reset.css" type="text/css" /> - - <!-- syntax highlighting CSS --> - <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> - - <!-- github ribbon CSS --> - <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> - - <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> - - <!-- Typekit --> - <script type="text/javascript">try{Typekit.load();}catch(e){}</script> - - <style> - .container { - width: 760px; - margin: auto; - } - .menu { - margin-left: 40px; - padding-top: 10px; - padding-bottom: 10px; - } - .menu a { - margin-right: 10px; - } - p { - width: 720px; - margin: auto; - } - </style> -</head> -<body> - <div class="left ribbon-holder"> - <a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon"> - <span class="text">Fork on GitHub</span> - </a> - </div> -<div class="container"> - <div class="menu"> - <a href="/">home</a> - <a href="/about.html">about</a> - <a href="/contribute.html">contribute</a> - <a href="/contact.html">contact</a> - <a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a> - </div> - - - - - <div class="stack"> - <div class="stackContent"> - <h1>Backbone Tutorials</h1> - <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> - <hr> - <div id="post"> -<h2>What is a model?</h2> -<p>Across the internet the definition of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller"><span class="caps">MVC</span></a> is so diluted that it’s hard to tell what exactly your model should be doing. The authors of backbone.js have quite a clear definition of what they believe the model represents in backbone.js.</p> -<blockquote> -<p>Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.</p> -</blockquote> -<p>So for the purpose of the tutorial let’s create a model.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> -</code></pre> -</div><p>So <em>initialize()</em> is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don’t have to include it in your model declaration but you will find yourself using it more often than not.</p> -<h4>Setting attributes</h4> -<p>Now we want to pass some parameters when we create an instance of our model.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - <span class="c1">// or we can set afterwards, these operations are equivelent</span> - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">});</span> - -</code></pre> -</div><p>So passing a javascript object to our constructor is the same as calling <em>model.set()</em>. Now that these models have attributes set we need to be able to retrieve them.</p> -<h4>Getting attributes</h4> -<p>Using the <em>model.get()</em> method we can access model properties at anytime.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"name"</span><span class="p">);</span> <span class="c1">// "Thomas"</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Setting model defaults</h4> -<p>Sometimes you will want your model to contain default values. This can easily be accomplished by setting a property name ‘defaults’ in your model declaration.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> - <span class="p">},</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - - <span class="kd">var</span> <span class="nx">age</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"age"</span><span class="p">);</span> <span class="c1">// 67</span> - <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"name"</span><span class="p">);</span> <span class="c1">// "Thomas"</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan']</span> - -</code></pre> -</div><h4>Manipulating model attributes</h4> -<p>Models can contain as many custom methods as you like to manipulate attributes. By default all methods are public.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> - <span class="p">},</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">'John Resig'</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'John Resig']</span> - -</code></pre> -</div><p>So we can implement methods to get/set and perform other calculations using attributes from our model at any time.</p> -<h4>Listening for changes to the model</h4> -<p>Now onto one of the more useful parts of using a library such as backbone. All attributes of a model can have listeners bound to them to detect changes to their values. In our initialize function we are going to bind a function call everytime we change the value of our attribute. In this case every time we adopt a new kid we are going to throw a party.</p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">name</span><span class="o">:</span> <span class="s1">'Fetus'</span><span class="p">,</span> - <span class="nx">age</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> - <span class="nx">children</span><span class="o">:</span> <span class="p">[]</span> - <span class="p">},</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"change:children"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"More children, single parenting is great!"</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> <span class="c1">// ['Ryan', 'Stewie Griffin']</span> - <span class="p">});</span> - <span class="p">},</span> - <span class="nx">adopt</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">){</span> - <span class="kd">var</span> <span class="nx">children_array</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"children"</span><span class="p">);</span> - <span class="nx">children_array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span> <span class="nx">newChildsName</span> <span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">children</span><span class="o">:</span> <span class="nx">children_array</span> <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">adopt</span><span class="p">(</span><span class="s1">'Stewie Griffin'</span><span class="p">);</span> <span class="c1">// This triggers a change and will alert()</span> - -</code></pre> -</div><p>So we can bind the a change listener to individual attributes or if we like simply ‘<em>this.bind(“change”, function(){});</em>’ to listen for changes to all attributes of the model.</p> -<h4>Fetching, Saving and Destroying</h4> -<p>Models actually have to be a part of a collection for requests to the server to work by default. This tutorial is more of a focus on individual models. Check back soon for a tutorial on collection implementation.</p> -<h4>Tips and Tricks</h4> -<p><strong>Get all the current attributes</strong></p> -<div class="highlight"><pre><code class="javascript"> - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Thomas"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="mi">67</span><span class="p">,</span> <span class="nx">children</span><span class="o">:</span> <span class="p">[</span><span class="s1">'Ryan'</span><span class="p">]});</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="c1">// { name: "Thomas", age: 67, children: ['Ryan']}</span> - <span class="cm">/* This simply returns a copy of the current attributes. */</span> - <span class="k">delete</span> <span class="nx">attributes</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">attributes</span> <span class="o">=</span> <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span><span class="p">;</span> - <span class="cm">/* The line above gives a direct reference to the attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */</span> -</code></pre> -</div><p><strong>Validate data before you set or save it</strong></p> -<div class="highlight"><pre><code class="javascript"> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> - <span class="c1">// If you return a string from the validate function,</span> - <span class="c1">// Backbone will throw an error</span> - <span class="nx">validate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">attributes</span> <span class="p">){</span> - <span class="k">if</span><span class="p">(</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">age</span> <span class="o"><</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">attributes</span><span class="p">.</span><span class="nx">name</span> <span class="o">!=</span> <span class="s2">"Dr Manhatten"</span> <span class="p">){</span> - <span class="k">return</span> <span class="s2">"You can't be negative years old"</span><span class="p">;</span> - <span class="p">}</span> - <span class="p">},</span> - <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> - <span class="nx">alert</span><span class="p">(</span><span class="s2">"Welcome to this world"</span><span class="p">);</span> - <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"error"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> - <span class="c1">// We have received an error, log it, alert it or forget it :)</span> - <span class="nx">alert</span><span class="p">(</span> <span class="nx">error</span> <span class="p">);</span> - <span class="p">});</span> - <span class="p">}</span> - <span class="p">});</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Mary Poppins"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> - <span class="c1">// Will trigger an alert outputting the error</span> - <span class="k">delete</span> <span class="nx">person</span><span class="p">;</span> - - <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">;</span> - <span class="nx">person</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s2">"Dr Manhatten"</span><span class="p">,</span> <span class="nx">age</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="p">});</span> - <span class="c1">// God have mercy on our souls</span> - -</code></pre> -</div><h3>Relevant Links</h3> -<ul> - <li><a href="http://documentcloud.github.com/backbone/">backbone.js official website</a></li> -</ul> -<h3>Author</h3> -<ul> - <li><a href="https://github.com/thomasdavis">Thomas Davis</a></li> -</ul> -<h3>Contributors</h3> -<ul> - <li><a href="https://github.com/utkarshkukreti">Utkarsh Kukreti</a></li> -</ul> -</div> -<script> -var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; -var idcomments_post_id; -var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-model'; -</script> -<span id="IDCommentsPostTitle" style="display:none"></span> -<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script> -</div> - - - - - </div> - - </div> -</div> -<script src="//static.getclicky.com/js" type="text/javascript"></script> -<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script> -<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript> -</body> -</html> |