201507271337_Backbone의 세 번째 – Event, Controller(Router), View, Collection, 모델

하나.Event
새 대상을 만들고 이벤트와 혼합하면 이벤트 방법을 사용할 수 있습니다.
예를 들면 다음과 같습니다.

1 var obj = {};       //js  

2 _.extend(obj, Backbone.Events);     // Backbone.Events   obj   。                 。_ underscore.js   ，   jquery.js  $

3 

4 obj.bind('data', function(data) { 

5 　　console.log('Receive Data: ' + data); 

6  }); 

7 obj.trigger('data', 'I/'m an Backbone.event');      //  Receive Data: I'm an Backbone.event

8 obj.unbind('data'); 

9 obj.trigger('data', 'I/'m an Backbone.event'); 

또한 이벤트가 많으면 이벤트에 이름 공간을 추가할 수 있습니다. 예를 들어'change:selection '.속성 이벤트가 일반 이벤트보다 먼저 트리거됩니다.예를 들면 다음과 같습니다.
우리는 먼저change 이벤트를 감청한 다음change:name 속성 이벤트를 감청했지만,change 이벤트 (name의 값을 바꾸는 것) 는 트리거할 때 항상 속성 이벤트를 먼저 트리거한 다음change 이벤트를 트리거합니다.name의 값이 아니라 다른 값으로 바뀌면,change 이벤트만 터치하고,change:name 속성 이벤트는 터치하지 않습니다.
 
둘.Route(Controller)
 
var controller = Backbone.Controller.extend({      routes: {          "": "home",          "!/comments": "comments",          "!/mentions": "mentions",          "!/:uid": "profile",          "!/:uid/following": "following",          "!/:uid/followers": "followers",          "!/:uid/status/:id": "status",          "!/search/users/:query": "user_search",          "!/search/:query": "search"      }, 　　initialize: function(){...}  ,     home: function(){...} ,     comments: function() {...} ,     mentions: function() {...} ,     profile: function(a) {...} ,     status: function(a, b) {...} ,     following: function(a) {...} ,     followers: function(a) {...} ,     user_search: function(a) {...} ,     search: function(a) {...} });
 
var custom = new controller();  
 
Backbone.history.start();
... ...
 
 
셋.Route(Controller)
view는 두 가지 역할을 하는데 이벤트를 감청하고 데이터를 표시합니다
var view = Backbone.View.extend({model: User,//이 View의 모델className: "components cross",template: $("#user-info-template").html(), initialize: function() {//new view({})에서 이 초기화 방법 을 호출합니다.bindAll(this, "render"); 　　　　this.model.bind("change",this.render)//모델 User 바인딩change 이벤트},render: function() {var a = this.model; $(this.el).html(Mustache.to html(this.template, a.toJSON());//Mustache 템플릿 라이브러리를 사용하여 템플릿을 해석하고 모델 User의 데이터를 json으로 변환하여 템플릿에 $(this.el).find(".days").html(function(){//b 다시 미세하게 바꿉니다.vard create";//모델 User에서 created 가져오기at의 값returnb;　　　　}); 　　　　return this ;　　} }); 
initialize에서 User 클래스 (모델) 가change 이벤트를 터치하면render 방법을 실행하고 새로운 보기를 표시합니다.render 방법에는 항상 약정된 속칭 문법이 있다.this.el은 DOM 대상이다.render의 목적은this에 내용을 기입하는 것이다.엘중.this.el은view에서 제공하는 tagName,className, id 속성에 따라 만들 것입니다. 하나도 없으면 빈 DIV를 만들 것입니다.업데이트 완료this.el 이후, 우리는 리턴 this를 해야 한다.이렇게 해야만 아래의 체인 호출을 계속 실행할 수 있다.우리도 $(view.el)을 사용할 수 있습니다.remove () 또는view.remove()는 DOM을 쉽게 비웁니다.View 층에는 의뢰 이벤트의 메커니즘이 있습니다.
var view = Backbone.View.extend({className: "likers-manager",template: $("#likers-components-template").html(),//템플릿 HTML 이벤트: {"click.btn-more":"loadMore"},initialize:function() {/new view({}), 가 호출됩니다.bindAll(this, "render", "updateTitle", "loadOne", "loadAll", "loadMore");//underscore의bingAll 방법을 호출합니다},render:function(){...},　　updateTitle: function() { ... } ,     loadOne: function(a) { ... } ,　　loadAll: function() { ... } ,     loadMore: function(a) { ... } });이 안에 이벤트의 키 값이 맞습니다. 형식은 {"이벤트 selector": "callback"}이고 그 중에서 클릭은 이벤트입니다.btn-more는this 기반입니다.El은 루트의 선택기입니다. 이렇게 약속하면 사용자가 클릭할 때.btn-more의 원소일 때loadMore 방법을 실행합니다
 
 
넷.Model
1. Model은 데이터를 만들고 검사하며 서버에 데이터를 저장합니다.Models는 이벤트를 바인딩할 수도 있습니다.예를 들어 사용자 동작 변화가 모델의change 이벤트를 촉발하면 이 모델 데이터를 보여 주는views는 이change 이벤트를 받아들여 다시 그립니다.가장 간단한 정의는 다음과 같습니다.

var Game = Backbone.Model.extend({});

좀 복잡하다.

var Game = Backbone.Model.extend({ 

　　initialize: function(){ 

　　　　

     }, 

　　defaults: { 

             name: 'Default title', 

             releaseDate: 2011, 

　　} 

});

 
initialize는 구조 방법에 해당하며 초기화 시 호출 (new 시 호출) 은 간단하고 실용적입니다.

var portal = new Game({ name: "Portal 2", releaseDate: 2011}); 



var release = portal.get('releaseDate'); 



portal.set({ name: "Portal 2 by Valve"});

 
현재 데이터가 메모리에 있으므로 서버에 커밋하기 전에 save 방법을 실행해야 합니다.

portal.save();

 
오.Collection
모델 컬렉션과 같습니다.Collection을 정의할 때는 반드시 Model을 지정해야 합니다.다음은 이 컬렉션에 다음과 같은 방법을 추가합니다.

var GamesCollection = Backbone.Collection.extend({ 

   model : Game, 

   old : function() { 

　　  return this.filter(function(game) { 

       　　return game.get('releaseDate') < 2009; 

    　}); 

　  } 

});

 
컬렉션은 다음과 같이 사용됩니다.

var games = new GamesCollection 

games.get(0);

 
물론 다음과 같이 동적으로 집합을 구성할 수도 있다.

  var GamesCollection = Backbone.Collection.extend({ 

   model : Game, 
   url: '/games' 

}); 

var games = new GamesCollection 
games.fetch();

 
 
이쪽 URL은collection에서 데이터를 어디서 얻는지 알려주고fetch 방법은 서버에 다른 요청을 해서 데이터 구성 집합을 가져옵니다.(fetch는 실제로 jquery를 호출하는 aax 방법)
템플릿 해결은 Underscore에서 제공하는 방법입니다.또한 Underscore는 Backbone에 의존해야 하는 라이브러리입니다.템플릿 구문 분석 방법을 사용하면 JSP 페이지에 JAVA 코드를 포함하는 것처럼 HTML 구조에 JS 코드를 혼합하여 포함할 수 있습니다.

 <ul> 

　　<% for(var i = 0; i < len; i++) { %> 

　　<li><%=data[i].title%></li> 

　　<% } %> 

</ul> 

 
템플릿 해석을 통해 우리는 동적으로 HTML 구조를 만들 때 문자열을 연결하는 방법을 사용할 필요가 없다. 더욱 중요한 것은 보기의 HTML 구조를 독립적으로 관리할 수 있다. (예를 들어 서로 다른 상태는 서로 다른 HTML 구조를 표시할 수 있고, 우리는 여러 개의 단독 템플릿 파일을 정의하여 필요에 따라 불러오고 렌더링하면 된다.)Backbone에서 on이나off 방법으로 사용자 정의 이벤트를 귀속시키고 제거할 수 있습니다.어느 곳에서든지 Trigger 방법을 사용하여 이 연결된 이벤트를 촉발할 수 있습니다. 이 이벤트를 연결된 모든 방법이 실행됩니다. 예를 들어:

var model = new Backbone.Model(); 

model.on('custom', function(p1, p2) { 

     }); 



 model.on('custom', function(p1, p2) { 

    }); 

model.trigger('custom', 'value1', 'value2');   //            

model.off('custom'); 

model.trigger('custom');



//   custom  ，         ，                   

 
 
Backbone을 다시 로드합니다.sync 방법으로 기존 데이터 인터페이스 어댑터