zoukankan      html  css  js  c++  java
  • [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS

    domStreams enable you to pass additional data along the stream that can be provided by the template (such as data coming from a v-forrendering of an Array). You can then pluck off the data from the stream and use it further down the stream.

    <template>
      <section class="section">
        <button class="button" :disabled="disabled$" v-stream:click="{subject: click$, data: 1}">{{buttonText$}}</button>
        <h2>
          {{name$}}
        </h2>
        <img v-stream:error="imageError$" :src="image$" alt="">
      </section>
    </template>
    
    <script>
    import { from, of, merge, throwError } from 'rxjs';
    import {
      exhaustMap,
      switchMap,
      pluck,
      map,
      mapTo,
      catchError,
      shareReplay,
      share,
      startWith
    } from 'rxjs/operators';
    
    export default {
      name: 'app',
      domStreams: ['click$', 'imageError$'],
      subscriptions() {
        const createLoader = url => from(this.$http.get(url)).pipe(pluck('data'));
    
        const luke$ = this.click$.pipe(
          pluck('data'),
          map(id => `https://starwars.egghead.training/people/${id}`),
          exhaustMap(createLoader),
          catchError(() => of({name: 'Failed.. :('})),
          share()
        );
    
        const name$ = luke$.pipe(pluck('name'));
    
        const loadImage$ = luke$.pipe(
          pluck('image'),
          map(src => `https://starwars.egghead.training/${src}`)
        );
    
        const failImage$ = this.imageError$.pipe(
          mapTo(`http://via.placeholder.com/400x400`)
        );
    
        const image$ = merge(
          loadImage$,
          failImage$
        )
    
        const disabled$ = merge(
          this.click$.pipe(mapTo(true)),
          luke$.pipe(mapTo(false)),
        ).pipe(startWith(false));
    
        const buttonText$ = disabled$.pipe(map(b => (b ? 'Loading...' : 'Load')));
    
    
        return {
          name$,
          image$,
          failImage$,
          disabled$,
          buttonText$
        };
      }
    };
    </script>
  • 相关阅读:
    VIM 第二天--快捷键
    Vim 第一天
    The Salt Master has cached the public key报错解决办法
    nginx启用TCP反向代理日志配置
    FastDFS数据迁移
    nginx修改上传文件大小限制
    ipv6禁用导致rpcbind服务启动失败解决办法
    ELK之elasticdump迁移es数据
    MySQL+Amoeba实现数据库读写分离
    使用Zabbix监控RabbitMQ消息队列
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9332271.html
Copyright © 2011-2022 走看看