<!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. 使用CXF+spring创建一个web的接口项目

    一.web project整合spring 1.1.打开Myeclipse,建立web project(eclipse为dynamic web project),使用J2EE5.0. 1.2.加入Sr ...

  2. yum安装于卸载软件常见命令

    1.使用yum安装和卸载软件,有个前提是yum安装的软件包都是rpm格式的. 安装的命令是,yuminstall ~,yum会查询数据库,有无这一软件包,如果有,则检查其依赖冲突关系,如果没有依赖冲突 ...

  3. Sqlserver2012数据库乱码的解决方法

    Sqlserver2012数据库乱码的解决方法 1.      在创建数据库时,一定要指定数据库的排序规则 2.      输入数据库名称 3.      选中选项,在排序规则中选中Chinese_P ...

  4. solr创建新的Core

    1.  在example目录下创建taotao-solr文件夹: 2.  将./solr下的solr.xml拷贝到taotao-solr目录下: 3.  在taotao-solr下创建taotao目录 ...

  5. InstallShield常用prq文件的下载地址

    VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...

  6. Head First HTML与CSS — 布局与定位

    1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...

  7. Java 坦克小游戏心得

    原本是闲得慌无聊才去尝试做这个项目的,因为小时候玩小霸王的游戏机,那个时候经常玩这个游戏吧,特别是喜欢那种自定义地图的模式,觉得自由度非常不错.总之关于这个游戏,想说的一大堆.鉴于能有个空闲的时间,打 ...

  8. CSS投影实现方式

    备用素材: 1.png    shadow.png 第一种方式: 利用负边距实现 最终效果图: <!DOCTYPE html> <html lang="en"&g ...

  9. （五）JS学习笔记 - JQuery缓存机制

    历史背景 开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点: 循环引用 直接暴露数据,安全性? 增加一堆的自定义属性标签,对浏览器来说是没意义的 取数据的时候要对H ...

  10. 011_hasCycle

    /* * Author :SJQ * * Time :2014-07-16-20.21 * */ #include <iostream> #include <cstdio> # ...