1

我有 2 Bacon.jQuery Models（但问题可以用任何 Bacon 来说明Observable）。

我有 3 个组合框foo：bar和quux. bar取决于foo和quux取决于 和 的bar组合quux。有一个函数可以从和findQuux中找到组合框的值。quuxfoobar

如果用户更改组合框，则选择和框中foo的值。这是选择的工作实现：barquuxquux

// 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)

问题在于，当输入一个无法找到 a 的不可能组合时，它findQuux期望foo和和崩溃的有效组合。barquux

该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看到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 的惯用推荐方法是什么。

4

1 回答 1

1

我将从quuxCombo只输出有效值开始findQuux。我更喜欢为输入foo和bar页面加载提供合理的值，但如果这不可能（为什么不呢？），我会filter在输入上使用。例如，

var quuxCombo = Bacon.combineWith(findQuux, fooModel.filter(validFoo), barModel.filter(validBar))

不过我想，你想在有效输入存在之前从一些初始值开始。为此，我Property.startWith在 Bacon.js 0.6.15 中添加了一个新方法。所以，现在你可以

var quuxCombo = Bacon.combineWith(findQuux, fooModel.filter(validFoo), barModel.filter(validBar)).startWith("quux4")
于 2013-09-10T19:03:05.047 回答