18

如何构建一个 rxjs 应用程序？大约有一百个玩具介绍示例，但没有一个完整的应用程序示例，带有小部件、子小部件等，显示整个应用程序的数据流。

例如，假设您有一个带有某种状态的可观察对象。您需要将其传递给小部件。该小部件具有需要该状态部分的子小部件。你订阅了吗？

sub = state.subscribe(widget)

现在“小部件”在单子之外。子小部件不能对状态使用可观察的方法。如果您将小部件作为副作用运行，则会遇到同样的问题。

state.doAction(widget)

那么你是否将流传递给小部件？如果是这样，你会得到什么？

what = widget(state)

小部件是否订阅状态并返回一次性？它是否返回从状态派生的流？如果有，里面有什么？您是否尝试通过广泛使用 selectMany(identity) 将所有小部件/子小部件/子子小部件中的所有流收集在一起，以获得您订阅的最终应用程序流以启动整个过程？

如果小部件根据状态按需创建子小部件，小部件如何管理其子小部件？我一直在尝试使用 groupBy() 的解决方案，每个子小部件都有一个组，但是管理从嵌套的 observable 返回的所有订阅或流是一个令人难以置信的噩梦。

即使是整个应用程序的一个示例也会有所帮助。

4

1 回答 1

6

将 observables 作为参数传递给小部件的构造函数，并让小部件订阅或使用其他 monad 对其进行转换，然后再将其传递给它的子小部件构造函数。小部件将管理自己的订阅。

如果小部件产生数据（例如用户输入），则将其公开为小部件上的 Observable 属性。

请注意，小部件本身不是可观察流的一部分。它们只是消耗输入流并产生输出流。

// main app
var someState = Rx.Observable....;
var someWidget = createSomeWidget(someState, ...);
var s = someWidget.userData.map(...).subscribe(...);

// SomeWidget
var SomeWidget = function ($element, state, ...) {
    this.userData = $element
        .find("button.save")
        .onAsObservable("click")
        .map(...collect form fields...);

    // we need to do stuff with state
    this.s = state.subscribe(...);

    // we also need to make a child widget that needs some of the state
    // after we have sanitized it a bit.
    var childState = state.filter(...).map(...)...;
    this.childWidget = new ChildWidget(childState, ...);

    // listen to child widgets?
}

等等。如果您使用 Knockout，您可以利用ko.observable创建双向可观察流，有时避免需要在小部件上添加输出属性，但这是另一个主题 :)

于 2014-02-28T16:57:57.883 回答