我有 2 个 Bacon.jQuery Models
(但问题可以用任何 Bacon Observable
来说明)。
我有 3 个组合框:foo
、bar
和 quux
。 bar
依赖于 foo
,quux
依赖于 bar
和 quux
的组合。有一个 findQuux
函数,它从 foo
和 bar
中查找 quux
组合框的值。
如果用户更改 foo
组合框,则选择 bar
和 quux
框中的值。以下是 quux
选择的有效实现:
// WORKS
var 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 WORK
var quuxCombo = Bacon.combineWith(findQuux, fooModel, barModel)
quuxModel.addSource(quuxCombo)
问题是 findQuux
需要 foo
和 bar
的有效组合,并且当输入不可能的组合时会崩溃,而 >quux
找不到。
onValues/push
解决方案之所以有效,是因为当用户更改 foo
组合框时,findQuux
仅被调用一次。 bacon.combineWith
解决方案不起作用,因为 findQuux
被调用了两次。
实现quuxModel
数据源的推荐方法是什么?防御性地编码 findQuux
不是一个选择。
完整代码可以在 http://jsfiddle.net/5zp4D/8/ 找到
更新:页面加载时 foo
和 bar
已经有了合理的值。从 fiddle 链接可以看出,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
永远不会采用无效值。此外,一旦用户更改 foo
,bar
就会重新填充,因此 UI 中只能看到有效的组合。
combineWith
方法的问题在于,当用户切换 foo
时,findQuux
函数会使用中间值调用两次,其中一个中间组合是不正确的,而组合成分单独是正确的。我改变了 fiddle 以更好地说明问题: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
时,您会看到 findQuuxDef
被调用为 1-4 (foo
是新的,bar
是旧的),然后是 2-4(foo
是新的,bar
是新的):
"invalid combination of foo1-value and bar4-value"
"valid combination of foo1-value and bar2-value"
我的问题是,使用 onValues/push
方法不会发生无效的中间组合,我想知道使用链接元素的 UI 的惯用推荐方法是什么。
最佳答案
我首先让 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")
关于javascript - Bacon.js 中的 mergeWith 与 onValues,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18701280/