用于动态小部件更新的 Twitter 小部件方法

Posted 2023-02-21

【中文标题】用于动态小部件更新的 Twitter 小部件方法

【英文标题】：Twitter widget methods for dynamic widget updating

【发布时间】：2011-06-25 14:27:25

【问题描述】：

我正在尝试向 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() 或类似的方法？

谢谢。

【参考方案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;

【讨论】：

喜欢#winning 和 Justin Bieber 在这个答案中都被利用的方式。 ;) 道具++;

【参考方案2】：

您可以通过使用“id”参数作为小部件元素的 html id 创建一个新实例来重新加载小部件。

示例如下。 （对我来说很好）

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