view의 내용 전체적으로도 기능이 뛰어나다 느끼지만 Tips and Trick에 있는 <%=%>를 이용한 변수 설정은
business logic과 presentation logic을 분리할 수 있다는 내용은 절정이지 않을까라고 느낀다.
view란?
backbone view는 model들과 같은 application들의 data를 반영시켜준다.
또한 view는 model의 event를 listen하거나 그에 따른 작용을 한다.
이번 장에서는 model을 bind하거나 view를 collection하는 방법을 얘기하지 않지만
view의 기능이나 javascript template library와 함께 view를 사용하는 방법에 대해 집중할려고 한다.
(특히 underscore.js의 .template에 대해서)
dom조작을 위해 jquery1.5를 사용할 것이다. 또는 mootools나 sizzle과 같은 다른 라이브러리도 가능하지만
공식적인 backbone.js 문서는 jquery를 지지하고 있다. backbone.view event는 jquery외에 다른 라이브러리에서는
동작하지 않는다.
search box를 만들어 볼려한다. live 예제는
여기서SearchView = Backbone.View.extend({
initialize:function() {
alert('Alerts suck.");
}
});
//초기화 함수는 backbone view가 초기화될 때 항상 호출된다.
//class의 생성자를 고려하였다.
var search_view = new SearchView;
- The "el" propertythe "el" property는 브라우져의 DOM 객체를 참고하였다. 모든 backbone.js view는 "el"property를 가지고 있고,
"el"을 정의하지 않았다면 backbone.js가 비어있는 div element 소유로 생성할 것이다.
예제에서는 div#search_container를 view의 el 속성에 설정하였다.
<div id="search_container"></div>
<script>
SearchView = Backbone.View.extend({
SearchView = Backbone.View.extend({
initialize:function() {
alert('Alerts suck');
}
});
var search_view = new SearchView({el:$("#search_container")});
});
</script>
명심해야 할 점은 container element를 bind해야한다. 모든 event에서 trigger는 이 element에서 해야한다.
- Loading a templateBackbone.js는 Underscore.js의 자식이다. Underscore.js는 micro-templating해결책을 포함하고 있다.
자세한 내용은
Underscore.js's의 문서에서 참고
view를 초기화할때 "render()"함수를 호출하여 실행해야 한다.
"render()"함수는 jQuery를 사용한 view의 "el"속성을 template에서 로드한다.
<div id="search_container"></div>
<script>
SearchView=Backbone.View.extend({
initialize:function(){
this.render();
},
render:function(){
//underscore를 사용하여 template을 compile한다.
var template=_.template($("#search_template").html(), {});
//backbone "el"을 통해 compile된 HTML을 로드한다.
this.el.html(template);
}
});
var seach_view=new SearchView({el:$("#search_container")});
</script>
<script id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
파일에 template이 위치해 있거나, CDN으로 부터 받는다. 이것은 유저들이 당신의 application이 항상cache된다고 확신시켜준다.
- Listening for eventsview에 listener를 attach하기 위하여, Backbone.View 속성의 "events"를 사용한다.
event listeners는 "el"속성의 자식노드에도 attach되어 질 수 있다는것을 기억해야 한다.
button에 "click"listener를 attach해보자.
<div id="search_container"></div>
<script>
SearchView=Backbone.View.extend({
initialize:function() {
this.rend();
},
render:function(){
var template=_.template($("#search_template").html(), {});
this.el.html(template);
},
events:{
'click input[type=button]":"doSearch"
},
doSearch:function(event){
//button을 클릭했을때, event.currentTarget과 함께 클릭되어진 element에 접근할 수 있다.
alert('search for" + $("#search_input").val());
}
});
</script>
<script id="search_template">
<label>Search</label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
- Tips and TricksUsing template variables
<div id="search_container"></div>
<script>
SearchView=Backbone.View.extend({
initialize:function() {
this.rend();
},
render:function(){
// Underscore.js Template를 사용하여 variables를 설정한다.
var variables = {search_label:"My Search"};
var template=_.template($("#search_template").html(), variables);
this.el.html(template);
},
events:{
'click input[type=button]":"doSearch"
},
doSearch:function(event){
//button을 클릭했을때, event.currentTarget과 함께 클릭되어진 element에 접근할 수 있다.
alert('search for" + $("#search_input").val());
}
});
</script>
<script id="search_template">
//<%=%>로 template variables에 접근 가능하다.
<label><%= search_label%></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
원문 :
http://backbonetutorials.com/what-is-a-view/
최근 덧글