요약 : 모델 데이터로 뷰 속성을 동적으로 설정
http://jsfiddle.net/5wd0ma8b/
var View = Backbone.View.extend( {
attributes : function () {
return {
class : this.model.get( 'item_class' ),
id : this.model.get( 'item_id' )
};
}
} );
var item = new View( {
model : new Backbone.Model( {
item_class : "nice",
item_id : "id1"
} )
} );
이 예제에서는 Backbone이 DOM 요소를 생성하도록 허용한다고 가정합니다.
이 attributes메서드는 뷰 생성자에 전달 된 속성이 설정된 후 (이 경우 model) 호출되어 Backbone이를 만들기 전에 모델 데이터로 속성을 동적으로 설정할 수 있습니다 el.
다른 답변과는 달리 뷰 클래스에서 속성 값을 하드 코딩하지 않고 모델 데이터에서 동적으로 설정합니다. render()속성 값을 설정할 때까지 기다리지 않습니다 . 에 대한 모든 호출에서 속성 값을 반복적으로 설정하지 않습니다 render(). DOM 요소에 대한 속성 값을 불필요하게 수동으로 설정하지 않습니다.
호출 할 때 클래스를 설정 Backbone.View.extend하거나 뷰 생성자 (예 new Backbone.View:)를 className설정하는 경우 DOM 속성 이름을 사용해야 하지만 attributes해시 / 메서드 를 통해 설정하는 경우 (이 예에서와 같이) 속성 이름을 사용해야합니다 class.
백본 0.9.9 기준 :
뷰를 선언 할 때 ... el, tagName, id그리고 className당신이 그 값은 런타임에 결정하려는 경우 이제 함수로 정의 할 수있다.
attributes그림과 같은 방법 을 사용하는 대신 유용 할 수있는 상황이있는 경우이를 언급합니다 .
기존 요소 사용
기존 요소를 사용하는 경우 (예 : el뷰 생성자에 전달 ) ...
var item = new View( { el : some_el } );
... 그러면 attributes요소에 적용되지 않습니다. 원하는 속성이 이미 요소에 설정되지 않은, 또는 당신이 당신의 뷰 클래스와 다른 위치에 데이터를 복제 할 수없는 경우에, 당신은 추가 할 수 있습니다 initialize적용보기 생성자에 방법 attributes에 el. 다음과 같은 것 (사용 jQuery.attr) :
View.prototype.initialize = function ( options ) {
this.$el.attr( _.result( this, 'attributes' ) );
};
el, 렌더링, 래퍼 방지 사용
내가 본 대부분의 예에서 뷰의 el은 '의미 론적'코드를 수동으로 작성해야하는 의미없는 래퍼 요소 역할을합니다.
아무 이유도 없다 view.el요구는 "요소 래퍼 의미없는"로. 사실, 그것은 종종 DOM 구조를 깨뜨릴 것입니다. <li>예를 들어 뷰 클래스가 요소를 나타내는 경우, <li>이를로 렌더링해야합니다. <div>또는 다른 요소 로 렌더링 하면 콘텐츠 모델이 손상됩니다. 당신은 가능성이 올바르게 뷰의 요소를 설정 (같은 속성을 사용하여 초점을 맞출 것이다 tagName, className하고 id) 다음의 렌더링 내용을 이후.
Backbone 뷰 객체가 DOM과 상호 작용하도록하는 방법에 대한 옵션이 넓게 열려 있습니다. 두 가지 기본 초기 시나리오가 있습니다.
요소에 대한 콘텐츠를 생성 할 수있는 다양한 방법이 있습니다 (예제에서와 같이 리터럴 문자열 설정, Mustache, Handlebars 등과 같은 템플릿 라이브러리 사용). el보기 의 속성을 사용하는 방법 은 수행중인 작업에 따라 다릅니다.
기존 요소
렌더링 예제는 뷰의 인스턴스화를 표시하지 않지만 뷰에 할당하는 기존 요소가 있음을 제안합니다. 이 경우 요소가 이미 문서에있는 경우 다음과 같은 작업을 수행 할 수 있습니다 (의 내용을 업데이트 el하지만 el자체 변경은 안 함 ).
render : function () {
this.$el.html( "Some stuff" );
}
http://jsfiddle.net/vQMa2/1/
생성 된 요소
기존 요소가없고 Backbone이 자동으로 생성하도록 허용한다고 가정 해 보겠습니다. 다음과 같은 작업을 수행 할 수 있습니다 (그러나 뷰가 외부에 대해 알 책임이 없도록 사물을 설계하는 것이 더 좋습니다).
render : function () {
this.$el.html( "Some stuff" );
$( "#some-container" ).append( this.el );
}
http://jsfiddle.net/vQMa2/
템플릿
제 경우에는 다음과 같은 템플릿을 사용하고 있습니다.
<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->
템플릿은 전체보기를 나타냅니다. 즉, 템플릿 주위에는 래퍼가 없습니다 div.player. 내 뷰의 루트 또는 가장 바깥 쪽 요소가됩니다.
내 플레이어 클래스는 다음과 같이 보일 것입니다 (매우 단순화 된 예제 포함 render()).
Backbone.View.extend( {
tagName : 'div',
className : 'player',
attributes : function () {
return {
id : "player-" + this.model.cid
};
},
render : function {
var rendered_template = $( ... );
this.$el.empty().append( rendered_template.children() );
}
} );