ajax - Durandal : best way to pass data between ViewModels

Question

Durandal:如果可能的话，在 Viewmodel 之间传递数据(参数)的正确方法是什么(不处理后端)。

假设我有 2 次查看 概览 和 详情 我希望用户点击 中的列表元素概览 它获取该元素的 id 并将其传递给 详情 Viewmodel 以便我可以开始使用该 ID。

感谢您的帮助

Answer 1

提示:您可能想要路线驱动的方法。另一种是为了完整性。

View 模型驱动的方法
一般来说，我会说:创建一个模块，我们称之为数据，然后在两个 View 模型中注入(inject)数据模块。然后，概览可以在数据模块上设置 clickedElementId 属性，详细信息可以读取属性的值并使用它(您甚至可以使属性可观察，以便在概览更改属性时通知详细信息)。这种方法在两个 View 模型可以同时处于事件状态时有效，而我的下一个(首选)解决方案仅在您从一个 View 路由到另一个 View 时才有效，因此它们永远不会同时处于事件状态。这种“ View 模型驱动”的方法是我个人用于应用程序中常见数据的方法(您也可以将应用程序外壳 View 模型用于这些类型的属性)。

路线驱动方法
鉴于您对情况的描述，这似乎是您想要做的。定义的路由可以采用(可选)参数。假设你现在有路由'details'，你可以把它改成'details/:id'(接受一个id参数，非可选)或'details(/:id)'(接受一个id参数，可选)。

您需要一个有点像这样的事件处理程序来单击列表元素:

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

ko.dataFor 是一个很好的剔除助手，用于获取绑定(bind)到您传递给它的元素的 View 模型数据，在本例中是您的列表元素。单击时，您要导航到详细信息，并将单击元素的 id 传递给详细信息。上面的代码完成了所有这些。

现在您的详细 View 模型的激活函数应该如下所示:

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

编辑:附加提示:您也可以直接从链接触发带有 id 的路由。假设你的整个列表元素被包裹在一个 anchor 标记中，你可以这样做:

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

祝你好运!如果仍然不清楚，请告诉我，