<!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. ContextLoaderListener初始化的前后文和DispatcherServlet初始化的上下文关系

    ContextLoaderListener初始化的上下文加载的Bean是对于整个应用程序共享的,不管是使用什么表现层技术,一般如DAO层.Service层Bean: DispatcherServlet ...

  2. Eclipse 添加快捷方式

    1.在/usr/share/applications创建一个desktop文件,命名为eclipse.desktop 文件内容如下 [Desktop Entry]Name=EclipseType=Ap ...

  3. .NET基础拾遗（7）多线程开发基础3

    一.如何使用异步模式? 异步模式是在处理流类型时经常采用的一种方式,其应用的领域相当广阔,包括读写文件.网络传输.读写数据库,甚至可以采用异步模式来做任何计算工作.相对于手动编写线程代码,异步模式是一 ...

  4. DataGrid( 数据表格) 组件[5]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. 多线程、多任务管理 简单demo

    需求:假设多个任务需要执行,每个任务不是一时半会能完成(需要能看到中间执行状况): 多个任务 根据条件不同 可能需要不同的处理 分析: 多线程并发执行多任务: 对任务进行管理,追踪中间执行状态: 运用 ...

  6. window对象BOM

    BOM的和新对象是window,他表示流浪器的一个实例,作为一个Global对象,有权访问parseInt()等方法 在全局作用域声明的变量,函数都有钱访问 ; function sayName () ...

  7. debug 心得

    前天做了一个题,就是个简单的状压记忆化搜索,但是debuge了俩小时,给我整的快吐血了,各种不可思议的错误,我都要怀疑是不是电脑有毛病了,后来发现数组开小了,看来以后遇到不可思议的错误就要检查数组开没 ...

  8. POJ1995 Raising Modulo Numbers(快速幂)

    POJ1995 Raising Modulo Numbers 计算(A1B1+A2B2+ ... +AHBH)mod M. 快速幂,套模板 /* * Created: 2016年03月30日 23时0 ...

  9. void (*f(int, void (*)(int)))(int) 函数解析

    函数指针 今天与几个同学看到了一个函数指针定义: void (*f(int, void (*)(int)))(int) 以前在C trap pit fails里面见过,但是文章里面介绍的很详细,但是往 ...

  10. php 之 数据访问 增删改查练习题

    练习题内容: 一.查看新闻页面-----主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...