동적 위젯 업데이트를위한 Twitter 위젯 메소드

Question

Twitter 위젯에 대한 프로필 페이지에 옵션을 추가하려고하는데 사용자가 Twitter 계정을 추가 할 수있는 필드가 있으며 그 아래에 위젯의 미리보기가 표시됩니다. 계정을 입력하고 저장을 클릭하면 다시 작동합니다. 그러나 내가하려고하는 일은 블러 이벤트가 텍스트 필드에서 발생할 때 해당 계정으로 위젯을 새로 고치는 것입니다. 그것이 잘못 작동이 경우

var twitterWidget = new TWTR.Widget({ 
    version: 2, 
    type: 'profile', 
    rpp: 4, 
    interval: 6000, 
    width: 'auto', 
    height: 300, 
    theme: { 
    shell: { 
     background: '#cccccc', 
     color: '#333333' 
     }, 
    tweets: { 
     background: '#ffffff', 
     color: '#333333', 
     links: '#0099cc' 
     } 
    }, 
    features: { 
    scrollbar: false, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: true, 
    behavior: 'all' 
    } 
}); 
twitterWidget.setUser(twitterUser).render().start(); 

    $('#twitter_widget_id').change(function(){   
     twitterWidget.setUser($(this).val()).render().start(); 
    }); 

:

나는 다음과 같은 코드를 가지고 내가 입력 및 일반적으로 내가 빈 위젯을 받고 있어요 모든 계정 만 최신 트윗을 보여줍니다.

개체를 삭제하고 새 개체를 만들면 페이지가 비어있게되고 위젯이 추가됩니다.

누군가는 re-render() 또는 그런 식으로 TWTR.Widget()에 대한 공용 메서드를 알고 있습니까?

감사합니다.

Answer 1

문서화 된 트위터 위젯 소스 코드는 http://twitter.com/javascripts/widgets/widget.js에 있으며,이 문서를 통해 독자는 동작을 조작하는 방법에 대해 알아야 할 모든 것을 알려줍니다. 간단히 말해 위젯은 다음과 같이 작동합니다 :

위젯이 으로 처음 만들어지면 .init()이 호출되고 위젯이 페이지의 어디에 삽입되어 있는지 메모하고 위젯 HTML 코드를 해당 위치의 DOM에 삽입합니다. (그것은 항상 당신이 포함하고 있다고 가정합니다. 왜냐하면 머리 스크립트 나 윈도우 컨텍스트에 새로운 위젯을 만들면 윈도우의 루트에 자신을 포함하게됩니다.)

하지만, (임베디드 스크립트에서 호출되는 한) 함수를 사용하여 위젯을 생성 한 다음 나중에 위젯에 대한 참조를 유지할 수 있습니다. 나중에 .render()으로 전화를 걸면 위젯은 어디서나 재 렌더링됩니다.

_getWidgetHtml()과 같이 재미있게 시도 할 수있는 TWRT 개체에는 의사 개인 메서드가 있지만이 메서드는 .render()에 의해 호출되지만 사용하지 않아도됩니다.

방금 ​​다음 코드를 작성했으며 잘 작동합니다. 이 함수를 임베디드 스크립트 (그림)에서 호출 한 다음 나중에 새 검색 매개 변수로 다시 호출하여 다시 렌더링합니다.

<div id="my_widget_region"> 
    <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
    <script>do_twitter_widget('"#winning" or "justin bieber"');</script> 
</div> 

function do_twitter_widget(search_query, title, subtitle) { 
    if (!window.widgetRef) { 
    window.widgetRef = new TWTR.Widget({ 
     version: 2, 
     type: 'search', 
     search: search_query, 
     interval: 6000, 
     title: title || 'Tweets related to', 
     subject: subtitle || search_query, 
     width: 'auto', 
     height: 500, 
     theme: { 
     shell: { 
      background: '#8EC1DA', 
      color: '#FFFFFF' 
     }, 
     tweets: { 
      background: '#FFFFFF', 
      color: '#444444', 
      links: '#1985B5' 
     } 
     }, 
     features: { 
     scrollbar: false, 
     loop: true, 
     live: true, 
     hashtags: true, 
     timestamp: true, 
     avatars: true, 
     behavior: 'default' 
     }, 
     ready: function() { 
     // when done rendering... 
     } 
    }); 

    window.widgetRef 
     .render() 
     .start(); 
    } 
    else { 
    if (search_query != window.old_twitter_search) { 
     window.widgetRef 
     .stop() 
     .setSearch(search_query) 
     .setTitle(title || 'Tweets related to') 
     .setCaption(subtitle || search_query) 
     .render() 
     .start(); 
    } 
    } 

    window.old_twitter_search = search_query; 

    return window.widgetRef; 
} 

Answer 2

당신은 방금 위젯 요소의 HTML ID로 "ID"PARAMS을 사용하여 새 인스턴스를 생성하여 위젯을 다시로드 할 수 있습니다.

아래 예. (나를 위해 잘 작동)

window.twitterCreateOrUpdateProfile = function (username) { 

    var opts = { 
     version: 2, 
     type: 'profile', 
     rpp: 4, 
     interval: 30000, 
     width: 298, 
     height: 320, 
     theme: { 
      shell: { 
       background: '#86b9d1', 
       color: '#ffffff' 
      }, 
      tweets: { 
       background: '#ffffff', 
       color: '#444444', 
       links: '#0b0d0d' 
      } 
     }, 
     features: { 
      scrollbar: true, 
      loop: false, 
      live: false, 
      behavior: 'all' 
     } 
    }; 

    if (window.twitterCreateOrUpdateProfile.instance) { 
     opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id; 
    } 
    window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts); 
    window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start(); 
} 
window.twitterCreateOrUpdateProfile('evaisse');