用于动态小部件更新的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();
    });

在这种情况下它工作错误:它只显示我输入的所有帐户中的最新推文,一般来说我得到一个空的小部件.

如果我删除对象并创建一个新对象,它会使页面空白,然后添加小部件.

有没有人知道TWTR.Widget()的一些公共方法,如re-render()或类似的东西？

谢谢.

Answer 1

记录的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;
}