템플릿으로 제어되는 백본 목록 항목보기 태그

Question

html 파일의 템플릿을 사용하여 ListItemViews가 포함 된 ListView가 있습니다. Backbone은 이벤트를 위임 할 수 있도록 관련된 요소를 제어하는 ​​뷰를 기대합니다. This answer은 id와 같은 외부 태그에 일반적인 것들을 사용자 정의하는 표준 방법을 보여줍니다.

내 템플릿에 외부 태그가없는 것에 대해 조금 이상하다고 느낍니다. 클래스를 지정하거나 요소의 종류를 변경하려면 템플릿 IMO에있는 것이 더 직관적 인 것처럼 보입니다. 대부분의 경우 뷰를 기존 요소에 할당 할 수 있지만 컬렉션의 항목 뷰의 경우 처음부터 새 뷰와 요소를 만들어야합니다.

setElement를 사용하여 문자열을 엘에 할당하고 이벤트를 위임 할 수 있습니다. 그러나 나중에 편집과 같이 컨트롤을 다시 렌더링하면 DOM 연결이 끊어집니다.

window.Backbone.View.prototype.replaceElement = (element) -> 
    old = @$el 
    @setElement element, true 
    old.replaceWith @$el 

그럼 내가보기에 그것을 사용할 수 있습니다 : 템플릿

render:() -> 
    @replaceElement @template @model.toJSON() 
    return @ 

:

<script id="actionTemplate" type="text/x-handlebars-template"> 
    <li id="{{id}}"><input type="checkbox" />{{name}}</li> 
</script> 

내 솔루션은 새로운 하나 기존의 요소를 전환하는 jQuery의 replaceWith를 사용하여, setSelement을 포장했다

누구나이 함정을 볼 수 있습니까? 내 주요 관심사는 기존 태그에서 html을 바꾸는 것보다 느리고 더 중요하게는 단지 관용적이지 않다는 것입니다. 아마 내가 프레임 워크와 싸우는 것은 어리석은 짓일 것입니다. 실제로 템플릿의 태그 내용 만 유지하려고합니다.

Answer 1

당신의 접근 방식의 문제점은 당신이보기의 @el가 당신이 새로운 것으로 대체 한 원래의 것임을 기억해야한다는 것입니다. 따라서 모든 이벤트 리스너는 여전히이 오래된 요소를 듣습니다. 당신은 그냥 싶어 모든 항목에 대한 새로운 뷰 인스턴스를 생성하는 그것의 좋은 생각을 항목의 목록을 작성하는 경우,이 옆에

window.Backbone.View.prototype.replaceElement = (element) -> 
    old = @$el 
    @setElement element, true 
    old.replaceWith @$el 
    @setElement element 

: 그래서 당신이 뭔가를 작성해야합니다. ul 요소와 목록을 반복하는 템플릿이있는보기 하나면 충분합니다.

<script id="actionTemplate" type="text/x-handlebars-template"> 
    <ul> 
    {{each items}} 
     <li id="{{id}}"><input type="checkbox" />{{name}}</li> 
    {{/each}} 
    </ul> 
</script>