Backbone.js 및 underscore.js로 렌더링 탭 (jquery UI)

현재 strophe.js, backbone.js & wijmo (jquery UI 기반 UI 라이브러리) 및 채팅 인터페이스에서 작업 중입니다. 두 개의 대화 상자가 있습니다. 하나는 대화 상대 목록이고 다른 하나는 대화 상자입니다. 고전 JQuery와 UI의 마크 업 탭으로 구성됩니다 채팅 :Backbone.js 및 underscore.js로 렌더링 탭 (jquery UI)

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Chat 1</a></li> 
     <li><a href="#tabs-2">Chat 2</a></li> 
     <li><a href="#tabs-3">Chat 3</a></li> 
    </ul> 
    <div id="tabs-1"><!-- Content chat 1 --></div> 
    <div id="tabs-2"><!-- Content chat 2 --></div> 
    <div id="tabs-3"><!-- Content chat 3 --></div> 
</div>

각 개인 채팅 컨테이너가 참가자 목록 (다중 사용자 채팅) 메시지와 양식을 포함합니다.

백본에 상당히 새롭기 때문에 & 밑줄을 처리하기 위해 최선의 방법이 무엇인지 궁금합니다. 채팅 모델, 채팅 컬렉션, 채팅보기 및 채팅 목록보기로 시작했지만 탭을 렌더링하고 업데이트 된 상태로 유지하는 적절한 방법을 찾지 못했습니다.

아이디어가 있으십니까?

출처

2011-09-25 Julien Guigner

라우터를 사용하십시오.

채팅에 대한보기 클래스를 만듭니다. 각 채팅에는 자체보기와 자체 탭이 있습니다. 업데이트시 뷰에 대한 render() 함수는 사용자에게 표시되지 않더라도 채팅을 업데이트합니다.

는

내가 탭을 관리하기 위해 사용하는 코드는 다음과 같습니다

hide: -> 
    if @el.is(":visible") == false 
     return null 
    $('#' + @id + '-tab').removeClass('activetab').addClass('inactiveTab') 
    $.Deferred((dfd) => 
     @el.fadeOut('fast', dfd.resolve) 
    ).promise() 

show: -> 
    if (@el.is(':visible')) 
     return 
    $('#' + @id + '-tab').removeClass('inactiveTab').addClass('activetab') 
    $.Deferred((dfd) => 
     @el.fadeIn('fast', dfd.resolve) 
    ).promise()

이 뷰에가는 것입니다. 각보기는 slugified 이름을 얻습니다. jQuery 라이브러리 인 "Deferred"의 사용에 주목하십시오. 나는 나중에 토론 할 것이다.

'chat/:chatid': 'switchOrStartChat'

및 방법 : 당신의 라우터에서

는, 채팅에 대한 경로 정의 당신은 물론이 더욱 일반화 할 수

fadeAllViews:() -> 
     _.select(_.map(@views, (v) -> v.hide()), (t) -> t != null) 

    switchOrStartChat: (chatid) -> 
      chat = @views[chatid] ||= new ChatView({chatid: chatid}) 
      $.when.apply(null, this.fadeAllViews()).then(() -> view.show())

을하지만, 생각은 당신이 탭을 전환 할 때마다 보이지 않는 모든 것을 숨길 수있는 메소드를 토글 한 다음 (지연이 올바른 순서로 수행되는지 확인) 그렇지 않은 것을 보여줍니다. 탭은 각보기별로 유지 관리됩니다. 뷰에 의해 유지되는 실제 DIV 외부에 있기 때문에 조금 마무리해야하지만 꽤 간단합니다. chatid 슬러그가 포함 된 ID가있는 탭 DOM 객체를 만들려면 탭 객체에 대한 별도의 템플릿을 작성해야하지만 쉽게 관리 할 수 있습니다. (저는 요즘은 coffeescript 당파이지만 Javascript 버전으로 연결됩니다),이 기술을 사용하여 슬러그를 찾아 수정하는 방법에 대해 설명합니다.이 글에서는 한 페이지짜리 디자인에 대한 자습서를 작성했습니다. The Backbone Store 탭, 빵 부스러기 등과 같은 기반 네비게이션 보조 기능을 제공합니다.

출처

2011-09-26 20:39:06

죄송합니다. 회신을 잊어 버렸습니다. 덕분에 많은 도움이되었습니다.) –

라우터가 '보기 변경'을 이벤트에 적용하고 TabsView가 '새'보기의 이름으로 이벤트를 수신하여 업데이트되고 자동으로 다시 그려 지도록하기 위해 나중에 수정했습니다. 부모보기에서 책임을 지우므로 뷰 표시 체계의 향후 변경 사항과 관계없이 네비게이션 구성표의 향후 변경 사항을 작성합니다. –

Backbone.js 및 underscore.js로 렌더링 탭 (jquery UI)

답변

관련 문제