<!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. C程序设计的抽象思维-算法分析-大多数元素

    [问题] 请编写下面函数 int MajorityElement(int array[],int n); 该函数返回数组array中的多数元素.多数元素是指在占绝对多数(至少51%)的一个值.假设多数 ...

  2. 数据持久化之CoreData

    再次回归博客园, 已经实属不易了, 面临这近期忙忙碌碌的项目开发, 虽然并不是完全的没有闲暇时间, 但是怎么说呢, 也有着各种的无奈与曲折, 面临这产品需求的不断变化和页面的不断更新, 对于一个程序员 ...

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

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

  4. c#.net防止按F5刷新页面重复提交的方法

    在网上购物的过程中,提交完一个页面后,如果此时按f5刷新,则会弹出一个提示:如果继续,则会重新发送提交我们刚才提交的内容,这个问题应该规避掉,不然总是重复提交付款,那可不是件好事. 在c#.net中的 ...

  5. Android-操作栏之图标导航

    想实现图标向上导航功能,步子分两步走: 1.样式上要改变-->图标要变成可点击的按钮,并有一个向左的箭头. 2.功能上要实现-->实现向上导航 首先谈第一步: 对于拥有fragment的a ...

  6. 怎么用C#获取Scenario step在specflow里

    公司最近在用specflow 这种BDD的模式,但PM还是想把case再存进TestManager里面一份儿一遍后期集成TestManager 自动runcase用.所以我们需要获取每个scenari ...

  7. displaytag 动态列实现

    这种动态列的实现方法来自displaytag-examples-1.2.war提供的示例中,实际上下载下来的zip文件中不仅有各种jar包,还有这个包含各种例子的war包,是学习displaytag的 ...

  8. 新版本的strcpy_s

    char a[32] = "1234"; char b[32] ="123"; strcpy_s(b,sizeof(b), a + 2);//可以用strlen ...

  9. Qt5.4静态编译方法

    静态编译,就是编译器在编译可执行文件的时候,将可执行文件需要调用的对应动态链接库(.so或.lib)中的部分提取出来,链接到可执行文件中去,使可执行文件在运行的时候不依赖于动态链接库.这样就可以发布单 ...

  10. js ||与&&

    ||:找到结果为true的分项就停止,并返回该分项的值,否则继续执行,如果都没有为true的分项则返回最后分项的值(注意每个分项先转成bool与true进行比较). //例如下面的例子: // &qu ...