[RxJS] Reactive Programming - Rendering on the DOM with RxJS
On The with dom Rxjs Programming reactive rendering
2023-09-14 08:59:20 时间
<!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: 0; margin: 0; } .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; }
相关文章
- SqlBulkCopy – The given value of type String from the data source cannot be converted to type
- 【踩坑实录】-java.sql.SQLException: The MySQL server is running with the LOCK_WRITE_GROWTH option so it ca
- django2 The custom handler404 view 'users.views.page_not_found' does not take the correct number of
- ORA-24506: invalid attempt to change character set id on env handle ORACLE 报错 故障修复 远程处理
- ORA-25181: missing ON keyword for NESTED INDEX ORACLE 报错 故障修复 远程处理
- ORA-26810: Apply “string” on database “string” is in the mode of combined capture and apply. ORACLE 报错 故障修复 远程处理
- ORA-32167: No payload set on the Message ORACLE 报错 故障修复 远程处理
- ORA-32163: Method called on Invalid Environment type ORACLE 报错 故障修复 远程处理
- ORA-38475: The attribute set and the associated ADT are out of sync. ORACLE 报错 故障修复 远程处理
- ORA-46015: The value of the “paramDatatype” element is too long. ORACLE 报错 故障修复 远程处理
- ORA-47996: The RECYCLEBIN is turned on ORACLE 报错 故障修复 远程处理
- MySQL Error number: 3753; Symbol: ER_FUNCTIONAL_INDEX_ON_JSON_OR_GEOMETRY_FUNCTION; SQLSTATE: 42000 报错 故障修复 远程处理
- MySQL Error number: 4013; Symbol: ER_CANT_USE_ANONYMOUS_TO_GTID_WITH_GTID_MODE_NOT_ON; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-10459: cannot start media recovery on standby database; conflicting state detected ORACLE 报错 故障修复 远程处理
- F4 help functionality for a dynpro screen field using the PROCESS ON VALUE-REQUEST statement详解编程语言
- 24New Update on SQL Server 5324: Setting the Standard in Database Management(sqlserver53)
- The Power of the Hydra Oracle: Unlocking Potential(hydraoracle)
- Deploying Java on Linux: A Simple Guide for Beginners.(linux上部署java)
- Exploring the Depths of Linux: The Power of the l Command(linux-l)
- Discover the Versatility of Tilda Linux: The Perfect Operating System for Tech Enthusiasts.(tildalinux)
- Exploring the Power of Flex on Linux: A Comprehensive Guide(linuxflex)
- Exploring the Benefits of Running ATL on Linux Operating System(atllinux)
- Exploring the World of Image Viewing on Linux(linux看图片)
- Debugging PHP with Xdebug on Linux System(xdebug linux)
- 尝试攻克決勝難關The A to Z of Redis(the a什么redis)