<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.7.2.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

<div class="container">

    <div class="header">

         <h3>Who to follow</h3><a href="#" class="refresh">Refresh</a>

    </div>

    <ul class="suggestions">

        <li class="suggestion1">

            <img />

            <a href="#" target="_blank" class="username">this will not be displayed</a>

            <a href="#" class="close close1">x</a>

        </li>

        <li class="suggestion2">

            <img />

            <a href="#" target="_blank" class="username">neither this</a>

            <a href="#" class="close close2">x</a>

        </li>

        <li class="suggestion3">

            <img />

            <a href="#" target="_blank" class="username">nor this</a>

            <a href="#" class="close close3">x</a>

        </li>

    </ul>

</div>

</body>

</html>
var refreshButton = document.querySelector('.refresh');

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseStream = requestStream

  .flatMap(requestUrl =>

    Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))

  );

function createSuggestionStream(responseStream) {

  return responseStream.map(listUser =>

    listUser[Math.floor(Math.random()*listUser.length)]

  );

}

var suggestion1Stream = createSuggestionStream(responseStream);

var suggestion2Stream = createSuggestionStream(responseStream);

var suggestion3Stream = createSuggestionStream(responseStream);

function renderSuggestion(userData, selector) {

  var element = document.querySelector(selector);

  var usernameEl = element.querySelector('.username');

  usernameEl.href = userData.html_url;

  usernameEl.textContent = userData.login;

  var imgEl = element.querySelector('img');

  imgEl.src = userData.avatar_url;

}

suggestion1Stream.subscribe(user => {

  renderSuggestion(user, '.suggestion1');

});

suggestion2Stream.subscribe(user => {

  renderSuggestion(user, '.suggestion2');

});

suggestion3Stream.subscribe(user => {

  renderSuggestion(user, '.suggestion3');

});
body {

    font-family: sans-serif;

    padding: 10px;

}

h3 {

    font-weight: bold;

    display: inline-block;

  padding:;

  margin:;

}

.refresh {

    font-size: 80%;

    margin-left: 10px;

}

.header {

    background: #ECECEC;

    padding: 5px;

}

.suggestions {

    border: 2px solid #ECECEC;

}

li {

    padding: 5px;

}

li img {

    width: 40px;

    height: 40px;

    border-radius: 20px;

}

li .username, li .close {

    display: inline-block;

    position: relative;

    bottom: 15px;

    left: 5px;

}

[RxJS] Reactive Programming - Rendering on the DOM with RxJS的更多相关文章

  1. [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()

    In currently implemention, there is one problem, when the page load and click refresh button, the us ...

  2. [RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()

    So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cac ...

  3. [RxJS] Reactive Programming - What is RxJS?

    First thing need to understand is, Reactive programming is dealing with the event stream. Event stre ...

  4. [Reactive Programming] Async requests and responses in RxJS

    We will learn how to perform network requests to a backend using RxJS Observables. A example of basi ...

  5. [RxJS] Reactive Programming - Why choose RxJS?

    RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a ...

  6. [RxJS] Reactive Programming - Sharing network requests with shareReplay()

    Currently we show three users in the list, it actually do three time network request, we can verfiy ...

  7. [RxJS] Reactive Programming - New requests from refresh clicks -- merge()

    Now we want each time we click refresh button, we will get new group of users. So we need to get the ...

  8. [Reactive Programming] RxJS dynamic behavior

    This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm fo ...

  9. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

随机推荐

  1. 在Debian Wheezy 7.3.0上编译安装3.12.14内核

    最近需要对Linux的一个内核模块进行调整实验,故决定先在虚拟机中完成编译调试工作,最后再在真实的系统上进行测试.为了防止遗忘,把过程记录于此. 1. 准备系统环境 首先从官网下载最新版的Virtua ...

  2. Pythn中的super用法

    在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: 代码段1: 代码如下: class A: def __init__(self): p ...

  3. Java初转型-Tomcat安装和配置

    1.http://www.cnblogs.com/diegodu/p/5915358.html tomcat直接解压,启动然后测试是否正常. 2.http://www.cnblogs.com/mq00 ...

  4. 为什么子线程不能做UI操作

    在子线程中是不能进行UI 更新的,而可以更新的结果只是一个幻像:因为子线程代码执行完毕了,又自动进入到了主线程,执行了子线程中的UI更新的函数栈,这中间的时间非常的短,就 让大家误以为分线程可以更新U ...

  5. javascript 获取图片原始尺寸

    javascript 获取图片原始尺寸 function getImgInfo(url){ var img = new Image(), loaded = false; var info = {}; ...

  6. （原）ubuntu下使用ftp软件

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6121663.html 参考网址: http://tieba.baidu.com/p/387426074 ...

  7. JavaScript学习笔记(三十八) 复制属性继承

    复制属性继承(Inheritance by Copying Properties) 让我们看一下另一个继承模式—复制属性继承(inheritance by copying properties).在这 ...

  8. UVa 10098: Generating Fast

    这道题要求按字典序生成字符串的全排列,不可重复(但字符可以重复,且区分大小写). 基本思路是先对输入的字符串按字典序排序,然后从第一位开始递归,从所有输入的字符中选出一个填充,然后再选第二位..... ...

  9. css应用三

    1. Padding与margin Padding为内边距,padding值会计算在width和height之内.如:width:100px:height:100px:padding:10px:该di ...

  10. 根据反射生成SQL语句

    /** * 基础查询语句 * 返回类型的属性字符串Sql * @author: InkYi * 修改时间:2016年5月11日 - 上午10:06:00<br/> * 功能说明:<b ...