associations & javascript

JavaScript & Associations

Joost / @yopefonic

JavaScript

JavaScript

1. What it is

2. Basic syntax

3. Libraries

4. in Rails

5. Assignment

JavaScript / What

JavaScript / what

Brendan Eich

JavaScript / what

• 1995

• web browsers

• servers

• runs on almost all machines

JavaScript / what

Royal pain in the ass

JavaScript / what

• DOM manipulation

• AJAX

• General

JavaScript / Basic syntax

<!DOCTYPE html> <html> <head> <title>Some title</title> <script type=“text/javascript“ src=“/public/some_file.js“> </script> </head> <body> <!-- some content —> <script type=“text/javascript“> // your code </script> </body> </html>


// variablesvar x = 2;

// functionsvar power = function (y) { return y*y;}

// loggingconsole.log( power(x) );


// there are some quirks (function(_this){ var hidden = ‘some hidden variable’;

console.log( hidden );

_this.document.getElementById(“demo”).innerHTML = hidden; })(this);


2.toString(); // raises SyntaxError(2).toString(); // returns “2“

var girl = { name: ‘Martina‘ }girl.1234; // raises SyntaxErrorgirl['1234']; // works

[] + []; // returns ““ [] + {}; // returns [object Object] {} + []; // returns 0 {} + {}; // returns NaN


Brendan Eich

JavaScript / Libraries


• Dojo Toolkit

• MooTools

• YUI Library

• Node.js

• Socket.io

• Ext JS

• Script.aculo.us

• AngularJS

• Ember.js

• Backbone.js

JavaScript / Libraries / jQuery

// nativedocument.getElementById(“demo“).innerHTML = “Hello World“;

// jQuery$(“#demo“).text(“Hello World“);


// select tag$(“p“)

// select ID$(“#demo“)

// select Class$(“.demo .foobar“)

// select Attribute$(“[data-attibute=‘value’]“)


// events $(“a[href=‘/demo‘]“).on(“click“, function( event ){ event.preventDefault(); alert(“link is not being followed”); });

JavaScript / Libraries / underscore.js

// iterationvar array = [‘foo‘, ‘bar‘, ‘baz‘];

// nativefor (var i = 0; i < array.length; i++) { alert(array[i]);}

// underscore_.each(array, alert);

JavaScript / in Rails

JavaScript / in Rails / Layout

// In the layout <head> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

JavaScript / in Rails / Sprockets

// require files //= require jquery //= require jquery_ujs //= require turbolinks

// require folder //= require_tree .

JavaScript / in Rails / CoffeeScript

// JavaScriptvar square = function(x) { return x * x;};

// CoffeeScriptsquare = (x) -> x * x


// JavaScripttypeof elvis !== "undefined" && elvis !== null

// CoffeeScriptelvis?


// JavaScript bad comparators0 == ‘’true == 1null == undefinedfalse != ‘false’

// JavaScript good comparators0 !== ‘’true !== 1null !== undefinedfalse !== ‘false’


// CoffeeScript saves0 != ‘’true != 1null != undefinedfalse != ‘false’

JavaScript / Assignments

• As a user I want to show errors on my author creation form before I submit the form so I know if the name is a valid one.

• As a user I want to be able to preview my post with a separate button so I can see how it will look before I actually save the post.

Intermission

Associations

Associations

1. modeling

2. one to many

3. many to many

4. dependencies

5. deep relations

6. assignments

Associations / Modeling


Authorname

Posttitle body

Categoryname


Authorname

Posttitle body

Categoryname

10..*


Authorname

Posttitle body author_id

Categoryname

10..*


Authorname


Categoryname

10..* 0..*

0..*


Authorname


Categoryname

10..*

0..*

CategoryPostpost_id category_id

1

0..*

1

Associations / One to Many

Associations / One to many

Authorname


10..*


// create migrationrails g migration AddAuthorIdToPost author_id:integer

// run migrationrake db:migrate


// generated code class AddAuthorIdToPost < ActiveRecord::Migration def change add_column :posts, :author_id, :integer end end


// add model codeclass Post < ActiveRecord::Base belongs_to :authorend

class Author < ActiveRecord::Base has_many :postsend


// add model codeclass Post < ActiveRecord::Base belongs_to :authorendclass Author < ActiveRecord::Base has_one :postend


// creating associationsauthor = Auther.create name: ‘Joost’

author.posts.create title: ‘railsgirls #4’, body: ‘current course’

Post.create title: ‘railsgirls #5’, body: ‘new course’, author: author

Associations / Many to many



Categoryname

0..*

PostCategorypost_id category_id

1

0..*

1


// create migrationrails g migration create_categories_posts post_id:integer category_id:integer

// run migrationrake db:migrate


// generated code class CreateCategoriesPosts < ActiveRecord::Migration def change create_table :categories_posts do |t| t.integer :post_id t.integer :category_id end end end


// add model codeclass Post < ActiveRecord::Base has_and_belongs_to_many :categoriesend

class Category < ActiveRecord::Base has_and_belongs_to_many :postsend


// creating associationspost = Post.create title: ‘railsgirls #4’, body: ‘current course’

post.categories = [Category.create, Category.create]

post.categories << Category.create name: ‘new category’

Associations / Dependencies


Author

Post Post


// setting up dependencies class AuthorsController < ApplicationController def destroy @author.destroy respond_to do |format| format.html { redirect_to authors_url, notice: 'Author was successfully destroyed.' } format.json { head :no_content } end end end


// setting up dependencies class AuthorsController < ApplicationController def destroy @author.posts.each do |post| post.destroy end @author.destroy respond_to do |format| format.html { redirect_to authors_url, notice: 'Author was successfully destroyed.' } format.json { head :no_content } end end end


// setting up dependencies class Author < ActiveRecord::Base has_many :posts, dependent: :destroyend

Associations / Deep relations


Authorname


Categoryname

10..*

0..*

CategoryPostpost_id category_id

1

0..*

1


// author’s [email protected](&:categories).flatten

// more [email protected]


// has_many :through class Author < ActiveRecord::Base has_many :posts has_many :categories, through: :posts end


// one thing though @author.categories.uniq

Associations / Assignment

JavaScript / Assignments

• As an author I want to be able to create a post from my page so that the post will be attached to my name.

• As an author I want to be able to attach and detach categories on my posts so they are nicely labelled.

associations & javascript

Technology