Методы виджетов Twitter для динамического обновления виджетов - PullRequest
Новая
       30

Методы виджетов Twitter для динамического обновления виджетов

9 голосов
/ 11 февраля 2011

Я пытаюсь добавить опцию на страницу профиля для виджета Twitter, и у меня есть поле, где пользователи могут добавлять свои учетные записи в Twitter, а под ним отображается предварительный просмотр виджета. Это работает нормально, если я вхожу в учетную запись и нажимаю сохранить и вернуться. Но я пытаюсь сделать его динамичным, чтобы обновить виджет с соответствующей учетной записью, когда в текстовом поле происходит событие blur .

У меня есть следующий код: 

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();
    });

В этом случае он работает неправильно: он показывает только самые новые твиты со всех учетных записей, которые я ввел, и в целом я получаю пустой виджет.

Если я удаляю объект и создаю новый, он делает страницу пустой, а затем добавляет виджет.

Кто-нибудь знает некоторые публичные методы для TWTR.Widget (), такие как re-render () или что-то в этом роде?

Спасибо.

Ответы [ 2 ]

21 голосов
/ 21 мая 2011

Документированный исходный код виджета Twitter доступен по адресу http://twitter.com/javascripts/widgets/widget.js, и его чтение расскажет вам все, что вам нужно знать о том, как управлять его поведением.Вкратце, виджет работает так:

Когда виджет впервые создается с new TWTR.Widget, он вызывает .init() и принимает к сведению, где он встроен в страницу, вставляя HTML-код виджета в DOM.позиция.(Это всегда предполагает, что вы встраиваете, поэтому, если вы создаете новый виджет в скрипте головы или в контексте окна, он в конечном итоге встраивается в корень окна.)

Новы все равно можете создать виджет, используя функцию (если она вызывается из встроенного скрипта), а затем удерживать ссылку на виджет для дальнейшего использования.Когда вы вызываете .render() позже, виджет просто перерисовывает себя, где бы он ни находился.

Существуют некоторые псевдо-приватные методы объекта TWTR, которые вы можете попробовать для забавы, такие как _getWidgetHtml() -который вызывается .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;
}
1 голос
/ 22 марта 2012

Вы можете просто перезагрузить виджет, создав новый экземпляр, используя параметры "id" как html id элемента widget.

Пример ниже. (У меня отлично работает) 

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');
...