1

私は 2 つの Bacon.jQuery を持っていますModels(ただし、問題は Bacon で説明できますObservable)。

foo、barおよびの3 つのコンボ ボックスがありquuxます。barに依存し、fooとquuxの組み合わせに依存しbarますquux。とからコンボボックスfindQuuxの値を見つける関数があります。quuxfoobar

ユーザーが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'設定するにはハックが必要なため、このソリューションには少し問題があります。quuxしかし、次のより単純な解決策はまったく機能しません。

// DOESN'T WORK
var quuxCombo = Bacon.combineWith(findQuux, fooModel, barModel)
quuxModel.addSource(quuxCombo)

問題は、 aが見つからない不可能な組み合わせが与えられると、andとfindQuuxの有効な組み合わせが期待されてクラッシュすることです。foobarquux

ユーザーがコンボボックスを変更したときに一度だけ呼び出されるため、onValues/pushソリューションは機能します。が 2 回呼び出されるため、ソリューションは機能しません。findQuuxfoobacon.combineWithfindQuux

のデータ ソースを実装するための推奨される方法は何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
}))

foobar決して無効な値を取らないでください。さらに、barユーザーが変更されると再入力さfooれるため、有効な組み合わせのみが UI に表示されます。

アプローチの問題combineWithは、ユーザーが切り替えるとfoo、findQuux関数が中間値で2回呼び出され、中間の組み合わせの1つが正しくなく、組み合わせの構成要素が個別に正しいことです。問題をよりよく説明するためにフィドルを変更しました：http://jsfiddle.net/5zp4D/12/

有効な組み合わせからわかるようにvar json、1-1、1-2、2-3、2-4、および 2-5 です。

壊れたバージョンのコメントを外し、ログを追加しました。foo1最初のコンボボックスを選択してから再度選択するとfoo2、ログに 3 つではなく 4 つのメッセージが表示されます。

ページの読み込み時に、quux値が正しく初期化されていることがわかります (2-4):

"valid combination of foo2-value and bar4-value"

foo1代わりに選択すると、foo2それfindQuuxDefが 1-4 ( foois new, baris old) で呼び出され、次に 2-4 ( foois new, baris new)で呼び出されます。

"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.startWithBacon.js 0.6.15 に新しいメソッドを追加しました。だから、今、あなたはすることができます

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