带有Jquery的Twitter-Post-Fetcher(可能还有Vue.js) [英] Twitter-Post-Fetcher with Jquery (and possibly Vue.js)

问题描述

我正在使用 Twitter-Post-Fetcher 来获取最新的5条推文.所以，如果我这样做:

I'm using Twitter-Post-Fetcher, to fetch the latest five tweets. So, if I do this:

var latestTweets = {
    "id": '695269278174572544',
    "domId": 'latest_tweets',
    "maxTweets": 5,
    "showTime": false,
    "enableLinks": true,
    "showInteraction": false,
    "showUser": false
};
twitterFetcher.fetch(latestTweets);

我收到了最新的5条推文.如预期的那样，只有推文本身.现在，如何以淡入/淡出效果一一显示它们?我可以使用Jquery对硬编码的unorderd list进行此操作.像这样(Jsfiddle 此处):

I get the latest 5 tweets. Only the tweets themselves, as intended. Now, how can display them one by one, with a fade in/out effect? I'm able to do that to a hard-coded unorderd list with Jquery. Like this (Jsfiddle here):

<div id="latest-tweets">
    <ul>
        <li>pseudo-tweet1</li>
        <li>pseudo-tweet2</li>
        <li>pseudo-tweet3</li>
        <li>pseudo-tweet4</li>
        <li>pseudo-tweet5</li>
    </ul>
</div>

---

$(document).ready(function() {
    var delay = 1000;
    $('ul > li').each(function() {
        $(this).show().delay(delay).fadeToggle(2000);
        $(this).hide().fadeToggle(1000);
       delay += 3000;
    });
});

上面的代码按预期的方式使每个列表项以可见的方式可见/不可见.

The above code renders each one of the list items visible/invible in a paced fashion, as intended.

但是，如何插入真实数据，更具体地说，如何从上面的Twitter-Post-Fetcher调用中插入结果?

However, how do I insert real data, more specifically, how do I insert the results from the Twitter-Post-Fetcher call above?

我尝试将Vue.js添加到组合中，但结果很奇怪，例如此 ，此和

I tried adding Vue.js to the mix, with weird results, such as this, this and this.

我当然愿意为这个问题提供完全不同的解决方案，可以将其重新表述为:如何一次显示n条推文的列表?

I'm of course open to entirely different solutions to the problem, which can be reformulated as: how to display a list of nth tweets, one at a time?

推荐答案

查看此Vue解决方案:

Check out this Vue solution:

https://jsfiddle.net/sfgry1ek/32/

您需要使用customCallback告诉twitterFetcher如何处理这些推文.然后，使用v-for对每个推文重复li元素.还要在元素上设置transition="fade"，这会在显示/隐藏它们时使它们动画化.然后只需一点时序逻辑就可以在正确的时间显示它们.

You need to use the customCallback to tell twitterFetcher what to do with the tweets. Then you use v-for to repeat the li elements for each of the tweets. You set transition="fade" on the elements as well, which causes them to animate when you show/hide them. Then just a bit of timing logic to show them at the right times.

html

<div id="latest-tweets">
  <ul>
    <li v-for="tweet in tweets" transition="fade" v-show="showing == $index">{{{ tweet }}}</li>
  </ul>
</div>

js

new Vue({
  el: '#latest-tweets',
  data: function(){
    return {
      tweets: [],
      showing: 0
    };
  },
  methods:{
    fetch:function(){
        var LatestTweets = {
            "id": '695269278174572544',
            "maxTweets": 5,
            "showTime": false,
            "enableLinks": true,
            "customCallback":this.setTweets,
            "showInteraction": false,
            "showUser": false
            };
      twitterFetcher.fetch(LatestTweets);
    },
    setTweets(tweets){
        this.tweets = tweets;
    },
    rotate: function(){
      if(this.showing == this.tweets.length - 1){
        this.showing = -1;
      }
      this.showing += .5;
      setTimeout(function(){
        this.showing += .5;
      }.bind(this), 600);
    }
  },
  ready:function() {
    this.fetch();
    setInterval(this.rotate, 6000);
  }
});

css

.fade-transition {
  transition: all .3s ease;
}

.fade-enter, .fade-leave {
  opacity: 0;
}

删除了JS fade的实现，转而支持CSS

removed the JS fade implementation in favor of the CSS one

这篇关于带有Jquery的Twitter-Post-Fetcher(可能还有Vue.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！