ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
cheatsheets/spine.html

398 lines
9.3 KiB
HTML
Raw Blame History

<!doctype html>
<html lang='en' class='no-js '>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='./assets/favicon.png' rel='shortcut icon'>
<meta content='/spine.html' name='app:pageurl'>
<title>Spine cheatsheet</title>
<meta content='Spine cheatsheet' property='og:title'>
<meta content='Spine cheatsheet' property='twitter:title'>
<meta content='article' property='og:type'>
<meta content='https://assets.devhints.io/previews/spine.jpg?t=20210218065802' property='og:image'>
<meta content='https://assets.devhints.io/previews/spine.jpg?t=20210218065802' property='twitter:image'>
<meta content='900' property='og:image:width'>
<meta content='471' property='og:image:height'>
<meta content="The one-page guide to Spine: usage, examples, links, snippets, and more." name="description">
<meta content="The one-page guide to Spine: usage, examples, links, snippets, and more." property="og:description">
<meta content="The one-page guide to Spine: usage, examples, links, snippets, and more." property="twitter:description">
<link rel="canonical" href="https://devhints.io/spine">
<meta name="og:url" content="https://devhints.io/spine">
<meta content='Devhints.io cheatsheets' property='og:site_name'>
<meta content='JavaScript libraries' property='article:section'>
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
<script>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments)};
gtag('js',new Date());
gtag('config','UA-106902774-1');
</script>
<meta property='page:depth' content='1'>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
<style>html{opacity:0}</style>
<link rel="stylesheet" href="./assets/2015/style.css?t=20210218065802">
<link href="./assets/style.css?t=20210218065802" rel="stylesheet" />
<link href="./assets/print.css?t=20210218065802" rel="stylesheet" media="print" />
</head>
<body>
<div class='all'>
<div class='site-header'>
<div class='container'>
This is <a href="."><em>Devhints.io cheatsheets</em></a> &mdash; a collection of cheatsheets I've written.
</div>
</div>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "Spine cheatsheet",
"image": [ "https://assets.devhints.io/previews/spine.jpg?t=20210218065802" ],
"description": "The one-page guide to Spine: usage, examples, links, snippets, and more."
}
</script>
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://devhints.io/#javascript-libraries",
"name": "JavaScript libraries"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://devhints.io/spine",
"name": "Spine"
}
}]
}
</script>
<div class='post-list -single -cheatsheet'>
<div class='post-item'>
<div class='post-headline -cheatsheet'>
<p class='prelude'><span></span></p>
<h1><span>Spine</span></h1>
<div class='pubbox'>
<div class='HeadlinePub' role='complementary'>
<script async src='https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio&cd=pubsrv.devhints.io/s' id="_carbonads_js"></script>
<span class='placeholder -one'></span>
<span class='placeholder -two'></span>
<span class='placeholder -three'></span>
<span class='placeholder -four'></span>
</div>
</div>
</div>
<div class='post-content -cheatsheet'>
<h2 id="models">Models</h2>
<pre><code>class User extends Spine.Model
@configure "User", "name", "address"
fullName: -&gt;
[@first, @last].join ' '
</code></pre>
<h3 id="javascript">JavaScript</h3>
<pre><code>// Subclassing
User = Spine.Model.sub()
</code></pre>
<h3 id="class-methods">Class methods</h3>
<pre><code>.configure 'modelname', attributes...
# Inheritance
.include(Module)
.extend(Module)
.create(name: "John")
.count()
# Events
.on 'refresh change', (user) -&gt; ...
.trigger 'event'
.change (user) -&gt; ... # same as on('change')
.fetch (user) -&gt; ... # same as on('fetch')
# JSON
.toJSON() # all records
.fromJSON(json) # from json string
.fromForm(el)
# Data
.records # Hash of instances
.attributes # array of attributes (from .configure)
# Convenience
.toString() #=&gt; "User"
# Find by ID
.exists(1)
.find(1) # throws error
# Find by something
.select (u) u.name == 'bob'
.findByAttribute 'name', 'bob'
.findAllByAttribute 'name', 'bob'
.all()
.slice(6, 13) # cloned copies of instances
# Iterating
.each (user) -&gt;
# Ends
.first()
.last()
# Deleting
.deleteAll()
.destroyAll()
.destroyAll({ ..options.. })
.destroy(2)
</code></pre>
<h3 id="instance-methods">Instance methods</h3>
<pre><code>user = new User();
user
.isNew()
.exists()
# Validation
.isValid()
.validate() # validate = (-&gt; "Name required" unless @name)
.attributes() # hash of attr values
.eql(other) # equality check
# Update
.load(attrs)
.reload()
.fromForm(form)
.updateAttribute("name", "john")
.updateAttributes(name: "John")
# Event
.on 'event', -&gt; ...
.trigger 'event'
# Retrieve
.toJSON()
# Persistence
.save()
.destroy()
.dup() # clone as unsaved
</code></pre>
<h3 id="mixins">Mixins</h3>
<pre><code>class User extends Spine.Model
@include MyModule
@extend MyModule
</code></pre>
<h3 id="events">Events</h3>
<pre><code>.on 'create'
.on 'update'
.on 'destroy'
.on 'save' # create / update
.on 'change' # create / update / destroy
.on 'refresh'
.on 'error' # validation error
</code></pre>
<h2 id="ajax">Ajax</h2>
<pre><code>class User extends Spine.Model
@extend Spine.Model.Ajax
@url: '/users'
@url: -&gt; '/users'
scope: '2013'
</code></pre>
<h3 id="using">Using</h3>
<pre><code>User.fetch()
user = new User()
user.url() #=&gt; "/users"
user.url('bands') #=&gt; "/users/bands"
user.scope = 'admin'
user.url() #=&gt; "/admin/users"
</code></pre>
<h3 id="host">Host</h3>
<pre><code>Spine.Model.host = 'http://endpoint'
</code></pre>
<h3 id="ajax-mapping">Ajax mapping</h3>
<pre><code>read → GET /collection
create → POST /collection (201 created)
update → PUT /collection/id
destroy → DELETE /collection/id
</code></pre>
<h3 id="associations">Associations</h3>
<pre><code>class Photo extends Spine.Model
@belongsTo 'album', 'Album' # window['Album']
@belongsTo 'album', 'models/album' # via require.js
class Album
@hasMany 'photos', 'models/photo'
album.photos().all()
album.photos().create(name: "Vacation")
album.photos().find(id)
photo = Photo.create(album: album)
photo.album()
photo.album_id
</code></pre>
<h3 id="see">See</h3>
<ul>
<li>http://spinejs.com/api/index</li>
<li>http://spinejs.com/api/models</li>
<li>http://spinejs.com/docs/ajax</li>
<li>http://spinejs.com/docs/relations</li>
</ul>
</div>
<ul class="social-list ">
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/spine.html" target="share"><span class="text"></span></a></li>
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Spine.%20https://devhints.io/spine.html" target="share"><span class="text"></span></a></li>
</ul>
</div>
</div>
<div class="about-the-site">
<div class="container">
<p class='blurb'>
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
<i class='fleuron'></i>
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
</p>
<p class='back'>
<a class='big-button -back -slim' href='.#toc'></a>
</p>
<p>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
<script>hljs.initHighlightingOnLoad()</script>
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink