杜兰德：在ViewModels之间传递数据的最佳方式

Question

durandal：如果可能的话，可以在视图之间传递数据（参数）的正确方法（不处理后端）。

让我说我有2个观点概述和详细信息我想要从概述上的列表元素上的用户klick它采用了ID该元素并将其传递给详细信息 ViewModel，以便我可以开始使用该ID。

谢谢你的帮助

Answer 1

提示：您可能希望路线驱动的方法。另一个是为了完整起见。

ViewModel驱动方法 一般来说，我会说：创建一个模块，让我们调用它数据，并在两个视图中注入数据模块。然后概述可以在数据模块上设置ClickEdElementId属性，详细信息可以读取属性的值并使用它（您甚至可以使属性可观察到，因此在概述更改该属性时会通知详细信息）。此方法有效，当两个ViewModels同时可以激活，而我的下一个（首选）解决方案只能在从一个视图到另一个视图时工作，因此它们永远不会同时活动。这种“ViewModel驱动”方法是我个人使用应用程序中的常见数据的方法（您也可以使用应用程序shell ViewModel以获取这些类型的属性）。

路线驱动方法 似乎是您对情况的描述，您想要做的事情。定义的路由可以占用（可选）参数。假设您现在有路由“详细信息”，可以将其更改为“详细信息/：ID”（接受ID参数，非可选）或“详细信息（/：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是一个很好的敲门助手，以获取绑定到您传入的元素的ViewModel数据，在这种情况下，您的列表元素。单击“要导航到”详细信息“，然后将单击元素的ID传递给详细信息。上面的代码确实如此。

现在您的详细信息ViewModel的激活功能应该如下所示：

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的路由。假设您的整个列表元素被包装在锚标记中，您可以执行类似的内容：

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

.

祝你好运！如果目前尚不清楚让我知道，