迪朗达尔：最好的方式来传递的ViewModels之间的数据 [英] durandal : best way to pass data between ViewModels

问题描述

迪朗达尔：什么是的ViewModels之间传递数据（参数）如果可能的话（不涉及后端）的正确方法

。

让说，我有2次概述和详情我想，去用户克利克列表元素从概述所花费的ID该元素并把它传递给详情视图模型，这样我就可以开始使用该ID的工作。

感谢您的帮助

解决方案

提示：您可能希望路由驱动方式。另一种是为了完整性的

视图模型驱动的方法 一般来说，我会说：创建一个模块，我们称之为数据，并在这两个的ViewModels注入数据模块。然后概述可以设置数据模块上的clickedElementId属性，详细信息可以读取属性值并使用它（你甚至可以使该属性可观察到这样的细节得到通知时，属性由概述改变）。此方法适用当两个的ViewModels可以活跃在同一时间，而我的下一个（preferred）解决方案仅工作，如果你的路线从一个视图到另一个，所以他们从来没有主动在同一时间。这种视图模型驱动的方法是我个人在应用程序中使用了通用数据（你也可以用你的应用程序的shell视图模型为这些类型的属性）。

路线驱动的方法 好像是你想不给你描述的情况是什么。定义的路由可以（可选）的参数。假设你现在有航线细节，你可以把它改成信息/：身份证'（接受一个id参数，不可选）或详细信息（/：ID）（接受一个id参数，可选）

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

  overview.onElementClick =功能（E）{
    VAR元=此，//我们的想法是，你需要点击的元素为code中的下一行
        koDataForElement = ko.dataFor（元）;

    router.navigate（信息/+ koDataForElement.id）;
}
 

ko.dataFor是一个很好的淘汰赛帮手得到在这种情况下你的列表元素绑定到传递到其中的元素的视图模型数据。在单击要浏览到的详细信息，并单击元素的ID传递给详细信息。上述code做了这一切。

现在您的详细信息视图模型的激活功能应该是这样的：

  details.activate =功能（ID）{
    // id是我们定义的路由参数。现在，你可以自由地利用它你的第二个视图里面！
};
 

编辑：附加提示：您还可以触发与ID路线直接从一个链接。假设你的整个列表元素被包装在一个锚标记，你可以做这样的事情：

 ＆LT; D​​IV数据绑定=的foreach：myListOfElements＆GT;
    ＆LT; A HREF =＃数据绑定=ATTR：{HREF：＃细节/+ ID}＆GT; listElementGoesHere＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

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

Durandal: What is the correct way to pass data (parameters) between Viewmodels if possible (without dealing with the backend ).

let say i have 2 views overview and details i want that went the user klick on a list element from overview it takes the id of that element and pass it to details Viewmodel so that i can start working with that id.

thank you for the help

解决方案

Hint: you probably want the route-driven approach. The other one is for the sake of completeness.

Viewmodel-driven approach In general I would say: create a module, let's call it data, and inject the data module in both viewmodels. Overview can then set the clickedElementId attribute on the data module, and details can read the attribute's value and use it (you could even make the attribute observable so details gets notified when the attribute is changed by overview). This approach works when both viewmodels can be active at the same time, while my next (preferred) solution only works if you route from one view to the other, so they are never active at the same time. This 'viewmodel-driven' approach is something I personally use for common data in the application (you can also use your application shell viewmodel for these kinds of attributes).

Route-driven approach Seems to be what you would want to do given your description of the situation. Defined routes can take (optional) parameters. Suppose you now have route 'details', you can change it to 'details/:id' (accepts an id parameter, non-optional) or 'details(/:id)' (accepts an id parameter, optional).

You need an event handler a bit like this for clicking a list element:

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 is a nice knockout helper to get the viewmodel data that is bound to the element you pass into it, in this case your list element. On click you want to navigate to details, and pass the id of the clicked element to details. That above code does all that.

Now your details viewmodel's activate function should look like this:

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

Edit: Additional hint: you can also trigger the route with id directly from a link. Suppose your whole list element is wrapped in an anchor tag, you could do something like this:

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

Good luck! If it's still unclear let me know,

这篇关于迪朗达尔：最好的方式来传递的ViewModels之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！