Question

我的视图模型中有两个observable，一个是由UI更改的值的Observable，另一个是表示命令失败时引发的异常。

我想创建一个observable，它在引发异常时从第一个Observable发出值。总之，我想得到以下结果

大理石图

Value (Observable 1)     -- 1 --- 2 -------- 3 ------ 4 ---------------- 5 -----------

Exception (Observable 2) ----------- e ------------------------- e ------------ e --

ExpectedResult           ----------- 2 ------------------------- 4 ------------ 5 --

Answer 1

您正在寻找ScrollViewer。

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<dom-module id="routing-chart">
  <template>
    <style>
      :host {
        display: block;

      }

      #org-chart{

          width: "100%";
          height: "100%";
      }


      .chartNode{
        background: red;
        padding: 10px 10px 10px 10px;
      }

      h3 {
        display: inline-block;
        padding-left: 34%;
        color: cadetblue;
      }

      .refresh {
        padding-left: 38%;
      }
      .refresh-background {
        background-color: var(--primary-color);
      }
      @media screen and (max-width: 320px) {
        #org-chart {
          width: 300px;
        }
      }
      #container {
        margin-left: -2%;
        margin-top: 10%;
        margin-bottom: 10%;
        margin-right: 10%;
      }
      @media only screen and (min-width: 321px) and (max-width: 375px) {
        #org-chart {
          width: 370px;
        }
      }

      @media (max-width: 320px) {
        /*#routing_chart{
          width: 300px;
        }*/
      }
      @media (min-width: 321px) and (max-width: 375px) {
        /*#routing_chart{
          width: 320px;
        }*/
      }
      @media (min-width: 376px) and (max-width: 425px) {
        /*#routing_chart{
          width: 380px;
        }*/
      }
      @media (min-width: 426px) and (max-width: 768px) {
        /*#routing_chart{
          width: 500px;
        }*/
      }
      @media (min-width: 769px) and (max-width: 1024px) {
        /*#routing_chart{
          width: 850px;
        }*/
      }
      @media (min-width: 1025px) {
        /*#routing_chart{
          width: 1000px;
        }*/
      }
      google-chart{
        width: "100%";
        height: "100%";
      }
    </style>

    <!-- <paper-material id="root" elevation=3> -->
      <div id="container">
      <!-- <div><h3>Routing Info</h3><span class="refresh"><paper-button class="refresh-background" raised
                                                                    on-click="loadDataForChart">
        <iron-icon icon="icons:refresh" style="color: #FFFFFF;"></iron-icon>
        </paper-button>

      </span></div> -->
<!--
      <div id="org-chart">
        <google-chart
          id="routing_chart"
          style="height: 100%;width: 100%"
          type='org'
          loading="{{isloading}}"
          options='{"title": "Routing Table"}'>
        </google-chart>
      </div> -->
      <div id='org-chart'></div>
      </div>
    <!-- </paper-material> -->

  </template>
  <script>
      google.charts.load('current', {packages:["orgchart"]});
      // var org-chart=document.querySelector('#container');
      // orgchart.addEventListener('dom-change',function (){
      //   console.log('dom-change');
      // });
      class RoutingChart extends Polymer.Element{
          static get is() { return "routing-chart"; }

          static get properties(){
              return{
                  hubId: {
                      type: String,
                      value: '01-00-00-14-00-01-00-00',
//            observer: 'loadDataForChart',
                      notify: true
                  },
                  isloading:{
                      type:Boolean,
                      notify:true
                  },
                  setGraph:{
                      type:Boolean,
                      value:false,
                      notify:true,
                      observer:'loadDataForChart'
                  }
              };
          }
          constructor() {
              super();

          }
//          hubChanged(){
//              this.shadowRoot.querySelector('#routing_chart').data=
//          }
          loadDataForChart() {
              if(this.setGraph==undefined) return;
              var t = Date.now();
              if(this.setGraph){

                  this.drawChart();

              }
          }



          drawChart() {


              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Name');
              data.addColumn('string', 'Manager');
              data.addColumn('string', 'ToolTip');

              // For each orgchart box, provide the name, manager, and tooltip to show.
              data.addRows([
                [{v:'0', f:'0<div style="color:red; font-style:italic">HUB</div>'},
                 '', 'The Hub'],
                [{v:'1', f:'1'},
                 '0', 'Node 1'],
                ['2', '0', 'Node 2'],
                ['3', '1', 'Node 3'],
                ['4', '3', 'Node 4']
              ]);

              // // Create the chart.
              // var divElement=document.createElement('div');
              //
              // document.getElementById('org-chart').appendChild(divElement);
              var chart = new google.visualization.OrgChart(this.shadowRoot.querySelector('#container'));
              // Draw the chart, setting the allowHtml option to true for the tooltips.
              chart.draw(data, {allowHtml:true,chartArea: {
                  width: '100%'
              },width:'100%'});

              var chart2 = new google.visualization.OrgChart(document.getElementById('org-chart'));
              chart2.draw(data, {allowHtml:true});

        }

      }

      customElements.define(RoutingChart.is, RoutingChart);

  </script>
</dom-module>

每当Sample发出信号时，这将从Value .Sample(Exception) .Subscribe(...);获得最新值。

Answer 2

无法真正改善'Sample'响应，但是如果你想用一些旧的/原始/核心函数构建它，基本上你只需要组合一个'CombineLatest'和一个DistinctUntilChanged（）在异常流上。

var values = new Subject<int>();
var exception = new Subject<Exception>();
values.CombineLatest(exception, Tuple.Create)
      .DistinctUntilChanged(t => t.Item2)
      .Select(t => t.Item1)
      .Dump();

values.OnNext(1);
values.OnNext(2);
exception.OnNext(new Exception());
values.OnNext(3);
values.OnNext(4);
exception.OnNext(new Exception());

输出：

的IObservable 2 4

Answer 3

确保Exception很热或已发布。

Value.SelectMany(v => Exception
    .Take(1).Select(e => v))
.Switch();

当两个异常之间没有值时，这将使您获得最后一个值。

当第二个可观察的发射时，获取第一个可观察的最新值

3 个答案: