1

作为一项练习，我正在尝试构建 2 个相互更新的依赖流。

测试应用程序只是一个“英寸 <-> 厘米”转换器，两个输入均可编辑。

我遇到的问题是我无法理解如何停止导致一个字段更改的递归。

为了更好地解释这个问题，让我们看一下代码的相关部分：

var cmValue = new Rx.BehaviorSubject(0),
    inValue = new Rx.BehaviorSubject(0);

# handler #1
cmValue.distinctUntilChanged().subscribe(function(v) {
    inValue.onNext(cmToIn(v));
});

# handler #2
inValue.distinctUntilChanged().subscribe(function (v) {
    cmValue.onNext(inToCm(v));
});

所以我们定义了 Subjects 每个都持有当前对应的值。

现在想象我们将英寸值更改为2（使用inValue.onNext(2);或通过键盘）。

接下来会发生什么 - 处理程序 #2 被触发并调用相应的以厘米为单位的值的重新计算。结果cmValue.onNext(0.7874015748031495)。

这个调用实际上由处理程序#1 处理，并使用0.7874015748031495 * 2.54导致另一个inValue.onNext(1.99999999999999973)调用的公式重新计算以英寸为单位的值（我们手动输入的值）。

幸运的是 - 由于 FP 舍入误差，我们停止了。但在其他情况下，这可能会导致更多循环甚至无限递归。

如您所见-我部分解决了应用问题，该问题.distinctUntilChanged()至少可以保护我们免受任何更改的无限递归，但正如我们所见-在这种情况下，它并不能完全解决问题，因为值不相同（由于 FP 操作自然）。

所以问题是：如何实现一个根本不会导致自递归的通用双向绑定？

我强调通用是为了说明使用.select()四舍五入将是这个特定问题的部分解决方案，而不是通用的（我和其他所有人都喜欢）。

完整代码和演示：http: //jsfiddle.net/ewr67eLr/

4

4 回答 4

2

我有一个类似的任务要解决我的项目。

首先，您必须选择您的基本事实 - 将代表您的测量值的值，假设您选择厘米。

现在，您只使用一个从多个来源获取更新的流。

由于必须存储一个无法在输入时精确表示的值，因此您必须以比整个浮点数更少的有效数字输出它。一个人不可能以 11 位有效数字的精度测量英寸，因此没有必要将转换后的值显示为该精度。

function myRound(x, digits) {
    var exp = Math.pow(10, digits);
    return Math.round(x * exp) / exp;
}

cmValue.subscribe(function(v) {
    if (document.activeElement !== cmElement) {
        cmElement.value = myRound(v, 3).toFixed(3);
    }
    if (document.activeElement !== inElement) {
        inElement.value = myRound(cmToIn(v), 3).toFixed(3);
    }
});

到目前为止，这是一个工作示例：http: //jsfiddle.net/ewr67eLr/4/

当我们将焦点更改为自动计算值，然后该值用不同的数字重新计算我们的第一个值时，剩下的是一个极端情况。

这可以通过为用户更改的值创建流来解决：

    cmInputValue = new Rx.BehaviorSubject(0),
    inInputValue = new Rx.BehaviorSubject(0),
        ...
Rx.Observable.fromEvent(cmElement, 'input').subscribe(function (e) {
    cmInputValue.onNext(e.target.value);
});
Rx.Observable.fromEvent(inElement, 'input').subscribe(function (e) {
    inInputValue.onNext(e.target.value);
});
cmInputValue.distinctUntilChanged().subscribe(function (v) {
    cmValue.onNext(v);
});
inInputValue.distinctUntilChanged().subscribe(function (v) {
    cmValue.onNext(inToCm(v));
});

http://jsfiddle.net/ewr67eLr/6/

现在这是我可以解决此任务的最佳方法。

于 2014-12-22T10:09:03.600 回答
1

正如我在评论中指出的那样，这个问题不需要循环。它也不需要主题或 document.activeElement。您可以让来自输入 A 的事件更新 B，来自输入 B 的事件更新 A 而无需流相互引用。

这里的例子：

http://jsfiddle.net/kcv15h6p/1/

这里的相关位：

var cmElement = document.getElementById('cm'),
    inElement = document.getElementById('in'),
    cmInputValue = Rx.Observable.fromEvent(cmElement, 'input').map(evToValue).startWith(0),
    inInputValue = Rx.Observable.fromEvent(inElement, 'input').map(evToValue).startWith(0);


inInputValue.map(inToCm).subscribe(function (v) {
    cmElement.value = myRound(v, 3).toFixed(3);
});

cmInputValue.map(cmToIn).subscribe(function (v) {
    inElement.value = myRound(v, 3).toFixed(3);
});

对于真正需要循环的问题，您可以使用 defer 创建循环，正如 Brandon 对这个问题的回答中指出的那样：

捕获可观察对象之间的循环依赖

像任何循环结构一样，您必须处理退出条件以避免无限循环。您可以使用诸如 take() 或 distinctUntilChanged() 之类的运算符来执行此操作。请注意，后者需要一个比较器，因此您可以使用对象标识 (x, y) => x === y 来退出循环。

于 2014-12-24T20:29:29.930 回答
1

在您的演示中，您有两个输入字段。此输入的“Keyup”事件将是信息源，输入值将是目标。在这种情况下，您不需要可变状态来检查可观察对象的更新。

Rx.Observable.fromEvent(cmElement, 'keyup')
    .map(targetValue)
    .distinctUntilChanged()
    .map(cmToIn)
    .startWith(0)
    .subscribe(function(v){ inElement.value = v; });

Rx.Observable.fromEvent(inElement, 'keyup')
    .map(targetValue)
    .distinctUntilChanged()
    .map(inToCm)
    .startWith(0)
    .subscribe(function(v){ cmElement.value = v; });

在这里查看我的示例：http: //jsfiddle.net/537Lrcot/2/

于 2014-12-23T07:47:05.060 回答
1

这是解决问题的纯算法方法（即它不依赖于 DOM 的特定状态）。基本上只使用一个变量来检测递归并中止更新。

/* two way binding */
var twowayBind = function (a, b, aToB, bToA) {
    var updatingA = 0,
        updatingB = 0,
        subscribeA = new Rx.SingleAssignmentDisposable(),
        subscribeB = new Rx.SingleAssignmentDisposable(),
        subscriptions = new Rx.CompositeDisposable(subscribeA, subscribeB);

    subscribeA.setDisposable(a.subscribe(function (value) {
        if (!updatingB) {
            ++updatingA;
            b.onNext(aToB(value));
            --updatingA;
        }
    }));

    subscribeB.setDisposable(b.subscribe(function (value) {
        if (!updatingA) {
            ++updatingB;
            a.onNext(bToA(value));
            --updatingB;
        }
    });

    return subscriptions;
};

var cmValue = new BehavoirSubject(0),
    inValue = new BehaviorSubject(0),
    binding = twowayBind(cmValue, inValue, cmToIn, inToCm);
于 2014-12-22T15:04:35.583 回答