问题标签 [rxjs-dom]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
61 浏览

javascript - RxDom:创建新 id 时不工作

我正在使用Reactive Extension DOM来监听来自 DOM 的事件。这是我的示例代码:

此代码在完成时test_id在页面上有效document.ready。但是我使用的是 AJAX 请求,所以test_id只是在客户端发送和接收 ajax 请求之后出现。我怎样才能让 RxDom 通知这个。

谢谢。

0 投票
1 回答
112 浏览

javascript - RxDom:当输入改变时更新 div 递归的内容

我正在使用Reactive Extension DOM来监听来自 DOM 的事件。目前我遇到一个问题:我有一个输入A和div B和div C。改变输入A会影响B,改变B的内容会改变div C的内容。所以,这意味着:如果我改变输入A,div B并且 div C 将自动更改。

目前我遇到问题:当输入A改变时,输入B改变成功但C没有改变。我不知道是因为RxDom不支持改变递归还是因为div没有改变事件。这是我的短代码:

显然我可以监听输入 A 的事件,然后更改 C 但这并不是我真正想要的方式,它看起来像一个解决方法版本。因为由于业务原因,div C 依赖于 div B 而不是 input A。

0 投票
1 回答
1418 浏览

javascript - 如何测试 RxJS 事件

我正在使用Observable.fromEvent(), 和各种链式运算符处理鼠标悬停事件。我将如何进行单元测试?

0 投票
1 回答
910 浏览

ajax - ReactJS Redux RxJS AJAX 加载指示器

我有一个 ReactJS 和 Redux 应用程序,并使用 RxJS 进行异步 AJAX 取消和错误处理。我用来连接 Redux 和 RxJS 的中间件(用于 Redux)是 redux-observable。

我正在向服务器发出请求,该服务器也处理错误和取消,这是史诗:

我正在尝试实现一个加载指示器,首先我想向控制台记录请求完成的百分比(通过使用 XHR2),然后我将实现 UI。简单来说:如何在 RxJS DOM Request 中实现 XHR2 下载进度?

我没有在网上找到任何关于这个问题的资源,希望其他正在搜索这个问题的人能有答案。

谢谢!

0 投票
1 回答
778 浏览

rxjs - 存根抓住 redux-observable 史诗

我正在尝试测试 rxjs 观察者的 catch 函数,但 catch 从未运行。

测试.js

史诗请看https://redux-observable.js.org/

0 投票
3 回答
721 浏览

angular - RxJS filter() 运算符

我正在尝试找到最干净的解决方案来使用filter()运算符来过滤我的观察值。

在这里,我正在复制服务调用以femaleList单独获取

联系人列表

RxJS 运算符中是否有任何选项可以将单个 observable 分配给两个变量。

我如何过滤联系人并将其分配给maleListfemaleList使用RxJS filter()运算符。

提前致谢

0 投票
2 回答
1440 浏览

javascript - 如何使用 RxJS 显示“用户正在输入”指示器?

我知道一点 BaconJS,但现在我正在尝试通过创建“用户正在输入...”指示器来学习 RxJS。这很简单,可以用两个简单的规则来解释:

  1. 当用户键入时,指示器应该立即可见。
  2. 当用户停止输入时,指示器应该仍然可见,直到用户最后一次输入操作后 1 秒。

我不确定这是否正确,但到目前为止我已经创建了两个流:

  1. 0一个心跳流,每秒发出一个。
  2. 一个流来捕获用户键入事件并为每个事件发出一个1

然后我将它们合并在一起,然后简单地挖掘结果。如果是1,那么我会显示指标。如果是0,那么我隐藏指标。

这就是它的样子:

这是 JSBin 的链接:

http://jsbin.com/vekixuv/edit?js,控制台,输出

我对这个实现有几个问题和疑问:

  1. 有时,当用户键入时,a0会偷偷溜进来,因此指示器会闪烁片刻,然后在下一次用户击键时返回。
  2. 不保证在用户停止输入 1 秒后指示器会消失。只能保证指示器会在 1 秒内消失(这与我们想要的相反)。
  3. 使用心跳流是正确的 RxJS 方式吗?我有一种感觉,可能不是。

我有一种感觉,我的实现完全脱离了基础,我很感激你能提供的任何帮助。谢谢。

0 投票
1 回答
333 浏览

rxjs - Rxjs 正在获取 AjaxObservable 而不是 ajax 响应

我有下一个 Observable 我试图过滤以使用户进入网络但 .mapTo(phone => verifyPhoneInNetwork(phone, country)) 返回 AjaxObservable 而不是 ajax 响应

0 投票
1 回答
155 浏览

angular - Rxjs-DOM 加载功能不会触发 Angular 2

我目前正在开发一个 Angular 2 项目,我只需要在页面上的所有元素都加载后调用特定的函数。我尝试使用 Observable 中的 eventFrom 函数,当我期待“点击”操作时它起作用了,但是一旦我切换到“加载”它根本没有触发。接下来我尝试使用 Rxjs-DOM 加载函数,但它没有也开火。

这是我现在拥有的代码:

temp.length始终为 0。如果我在timeout那里设置它,它将完美地工作,因为所有元素都需要 2-3 秒才能加载,然后temp不为空。但是在这种情况下超时是不可取的。有什么我做错了吗?另一个问题是,Angular 2 中是否只有在所有 dom 元素都实际加载后才能调用函数。

Thank you in advance.

0 投票
1 回答
307 浏览

reactjs - RxJS DOM 暂停可观察,而另一个“正在拖动”?

更新

我试图在这里制作一个独立版本:https ://codepen.io/neezer/pen/pPRJar

它不像我的本地副本那样工作,但我希望它足够相似,你可以看到我想要去哪里。

我也没有得到完全相同的行为,因为我将侦听器目标更改为document,这似乎对一些人有所帮助。

另外,我正在使用 RxJS v5 和最新版本的 React。


仍然掌握RxJS的窍门......

我有两个 Observable:一个订阅了表格上的 mouseover x 坐标以显示调整大小的列,另一个允许用户在该列上拖动。

粗略地说,第一个看起来像这样(以下所有内容都定义在componentDidUpdateReact 组件的生命周期方法中):

这很好用,给了我这个:

图像

所以现在我想提供实际的“拖动”行为,我尝试像这样设置一个新的 Observable

这样做存在三个问题:

  1. 一旦我完成了我的第一次“拖动”,我就不能再做任何事情了。我的理解是takeUntil完成了 Observable,我不确定如何“重新启动”它。
  2. mousemove我拖动时,来自第一个可观察对象的仍然处于活动状态,因此一旦我的x位置变化足以触发该行为,我的黑色 div 就会消失。
  3. 第二个 Observable 上的绑定似乎并不总是触发(它不可靠)。我认为这里可能存在竞争条件或发生的事情,因为有时我会刷新页面并且我会得到一次拖动(从#1),而其他时候我根本不会得到它。

ss

请注意,在干净刷新后,我无法拖动句柄(#3),然后我刷新,我无法将句柄拖动到第一个 Observable 的边界设置之外——黑色的大小调整栏消失并重新出现为我的鼠标的 x 坐标进入和离开那个信封(#2)。


我一直在努力解决这个问题已经有一段时间了,并且非常感谢任何关于我在这里做错了什么的见解。简而言之,我想要

  • 第一个 Observable 在我拖动时“暂停”,然后在我完成拖动时恢复
  • 一旦拖动完成,第二个 Observable 不会“完成”(或“重新启动”)
  • 第二个可靠工作的 Observable

正如我之前提到的,我目前在 React 组件的componentDidUpdate生命周期方法中设置了这个逻辑,其形状大致如下所示: