[Study] Step 01. About Backbonejs

 Backbone.js 시작하기

 

javacafe study로 Backbone.js를 살펴보고 있습니다.^0^good~

실습위주라서 이론을 한번 정리해보려고 합니다.

 

 1. Let's start Beginners!!(출처 : http://backbonetutorials.com/)  

    아래의 목차처럼 Backbone.js를 배워보도록 하자^^;

1) Why do you need Backbone.js?

Building single-page web apps or complicated user interfaces will get extremely difficult by simply using jQuery or MooTools. The problem is standard JavaScript libraries are great at what they do - and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.

I shouldn't need to explain why building something without any structure is a bad idea. Of course you can always invent your own way of structuring your application but you miss out on the benefits of the open source community.

Why single page applications are the future

Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc.

So how does Backbone.js help?

Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects.

2) What is a model?

Across the internet the definition of MVC 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.

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.

So for the purpose of the tutorial let's create a model.

    Person = Backbone.Model.extend({
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person;
 
So initialize() is triggered whenever you create a new instance of a model( models, collection
s 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.

 

<< 예제 파일 >>

acet.html

Setting attributes

Now we want to pass some parameters when we create an instance of our model.

    Person = Backbone.Model.extend({
        initialize: function(){
            alert("Welcome to this world");
        }
    });
    
    var person = new Person({ name: "Thomas", age: 67});
    // or we can set afterwards, these operations are equivelent
    var person = new Person();
    person.set({ name: "Thomas", age: 67});
  
So passing a JavaScript object to our constructor is the same as calling model.set(). Now t
hat these models have attributes set we need to be able to retrieve them.

<< 예제파일 >>

model.html

<< 소스 >>

Person = Backbone.Model.extend({            initialize: function(){       //      alert("Welcome to this world");         }     });         // 2가지의 방법으로 Backbone.js의 모델을 만들 수가 있다.    1) 파라미터 방식    :  So passing a JavaScript object to our constructor is the same as calling model.set().      var person = new Person({ name: "Thomas", age: 67});     // or we can set afterwards, these operations are equivelent        2) set() 함수 사용      var person = new Person();       // set / get으로 데이터를 넣다뺐다 할 수 가있다.^-^good~     person.set({ name: "Ace-t", age: 22});        alert(person.get('name'));

<< 결과 >>

What is a view?

Backbone views are used to reflect what your applications' data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically Underscore.js's _.template.

We will be using jQuery 1.8.2 as our DOM manipulator. It's possible to use other libraries such as MooTools or Sizzle, but official Backbone.js documentation endorses jQuery. Backbone.View events may not work with other libraries other than jQuery.

For the purposes of this demonstration, we will be implementing a search box. A live example can be found on jsFiddle.

    SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Alerts suck.");
        }
    });

    // The initialize function is always called when instantiating a Backbone View.
    // Consider it the constructor of the class.
    var search_view = new SearchView();