javascript - Bacon.js中的CombineWith与onValues

我有2个Bacon.jQuery Models（但是任何Bacon Observable都可以说明问题）。我有3个组合框：foo，bar和quux。 bar取决于foo，并且quux取决于bar和quux的组合。有一个findQuux函数可从quux和foo查找bar组合框的值。如果用户更改foo组合框，则会选择bar和quux框中的值。这是quux选择的有效实现：// WORKSvar quuxBus = new Bacon.Bus()Bacon.onValues(fooModel, barModel, function (foo, bar){ quuxBus.push(findQuux(foo, bar))})quuxModel.addSource(quuxBus.toProperty('quux4'))此解决方案有一个小问题，因为我需要'quux4' hack才能在页面加载时正确设置quux。但是以下更简单的解决方案根本不起作用：// DOESN'T WORKvar quuxCombo = Bacon.combineWith(findQuux, fooModel, barModel)quuxModel.addSource(quuxCombo)问题是findQuux期望foo和bar的有效组合，并且在喂入无法找到quux的不可能组合时崩溃。onValues/push解决方案之所以有效，是因为当用户更改findQuux组合框时，foo仅被调用一次。 bacon.combineWith解决方案不起作用，因为findQuux被调用了两次。为quuxModel实施数据源的推荐方法是什么？防御性地findQuux编码不是一种选择。完整代码可在http://jsfiddle.net/5zp4D/8/中找到更新：页面加载中已有foo和bar的合理值。从小提琴链接可以看出，fooModel用一个显式值初始化，并且barModel从该初始值重新计算：var fooModel = Bacon.$.selectValue(fooDom, 'foo2-value')var barModel = Bacon.$.selectValue(barDom)barModel.addSource(fooModel.map(function (x){ return json[x][1].val}))foo和bar从不采用无效值。此外，一旦用户更改bar，就会重新填充foo，因此在UI中只能看到有效的组合。combineWith方法的问题在于，当用户切换foo时，会使用中间值两次调用findQuux函数，并且中间组合之一不正确，而组合组成分别正确。我更改了小提琴以更好地说明问题：http://jsfiddle.net/5zp4D/12/从var json可以看出，有效组合是1-1、1-2、2-3、2-4和2-5。我取消注释了损坏的版本，并添加了日志记录。当您选择foo1，然后在第一个组合框中选择返回foo2时，您会在日志中收到4条消息，而不是3条消息：在页面加载时，您会看到quux值已正确初始化（2-4）："valid combination of foo2-value and bar4-value"当选择foo1而不是foo2时，您会看到以1-4（findQuuxDef是新的，foo是旧的）调用bar，然后以2-4（foo是新的，是新的）："invalid combination of foo1-value and bar4-value""valid combination of foo1-value and bar2-value"我的问题是bar方法不会发生无效的中间组合，并且我想知道什么是带有链接元素的UI的惯用推荐方法。 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 我将从让quuxCombo仅输出findQuux的有效值开始。我更希望在页面加载时为输入foo和bar设置一个合理的值，但是如果不可能（为什么不这样做），则可以在输入上使用filter。例如，var quuxCombo = Bacon.combineWith(findQuux, fooModel.filter(validFoo), barModel.filter(validBar))不过我想，您想从某个初始值开始，然后再输入有效的输入。为此，我在Bacon.js 0.6.15中添加了新方法Property.startWith。所以，现在你可以var quuxCombo = Bacon.combineWith(findQuux, fooModel.filter(validFoo), barModel.filter(validBar)).startWith("quux4") (adsbygoogle = window.adsbygoogle || []).push({});