<!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. POJ3692 Kindergarten 【最大独立集】

    Kindergarten Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5317   Accepted: 2589 Desc ...

  2. c++Socket 异步通讯

    在网络通讯中,由于网络拥挤或一次发送的数据量过大等原因,经常会发生交换的数据在短时间内不能传送完,收发数据的函数因此不能返回,这种现象叫做阻塞. Winsock对有可能阻塞的函数提供了两种处理方式:阻 ...

  3. HTML基础总结<链接>

    HTML 超链接(链接) HTML使用标签 <a>来设置超文本链接. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. ...

  4. HTM5新增结构化元素&非结构化元素&新增属性详解

    (1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类

  5. ORACLE中使用SQL的正则表达式判断邮箱格式

    在数据库中,有时需要判断字符串是否是一个或者多个邮箱格式,可以使用如下语句判断: ) FROM dual WHERE regexp_like(v_mail,'^\w+((-\w+)|(\.\w+))* ...

  6. iOS_SN_地图的使用（3）

    地图的定位,记得不用定位的时候要关掉定位不然会一直定位,使电量使用过快. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  7. PclZip:强大的PHP压缩与解压缩zip类

    PclZip简介PclZip是一个很强大的压缩与解压缩zip文件的PHP类,PclZip library能够压缩与解压缩Zip格式的压缩档(WinZip.PKZIP):且能对此类类档案进行处理,包括产 ...

  8. Python新手学习基础之函数-概念与定义

    什么是函数? 函数是可以实现一些特定功能的方法或是程序,简单的理解下函数的概念,就是你编写了一些语句,为了方便使用,把这些语句组合在一起,给它起一个名字,即函数名.使用的时候只要调用这个名字,就可以实 ...

  9. 在Mac上使用Nginx和FastCGI部署Flask应用

    最近在学习Flask,本文介绍一下如何部署Flask开发的应用,同时也学习一下Nginx的使用,这只是在Mac上的一个实验. 应用 这里使用的应用就是官方的文档中给出的Flaskr. 安装Nginx ...

  10. Visual studio 内存不足的解决方案（out of memory）

    编译Visual Studio项目,如果出现"out of memory "的编译错误,可以进行如下操作,加大应用程序可以使用的内存. 请先备份好系统和设置好系统还原点,大体步骤是 ...