DURANDAL - 将参数传递给组合和模态

Question

我的目标是在 Durandal 中使用 Bootstrap 模态机制显示项目的详细视图。假设我有一个视图模型：“itemdetail”和另一个视图模型：“项目”。 Bootstrap 的模态元素位于 items.html 上，但它是从 viewAttached 函数中的 itemdetail.js 调用的。

我能够弄清楚如何使用路由器导航到项目的详细视图（通过传递 id 'myroute/:id'），但我不知道如何在没有路由的情况下编写它。我会期待这样的事情：

<div data-bind="compose: {model: viewmodels/myvm, activate:true, id:itemID}

我知道我可以使用和观察并传递一些设置。但我不知道设置是否包含我自己的参数。

最终我想将此组合（项目的详细描述）注入引导模式并从 itemdetails（attachedView）中调用它。

这有意义吗？有更好的方法吗？

谢谢， 大卫

Answer 1

我认为使用 twitter 引导模式调用传递数据更优雅、更容易：

app.showModal('viewmodels/???', yourdataobject).then(function (result) {
            if (result) {

           }
);

Answer 2

顺便说一句，我认为这是一个优雅的解决方案。 我正在使用 v2.0.1。

 <!-- ko compose: { model:'MyMODEL' , activationData:[YOUR_DATA] } -->
 <!-- /ko -->
....
function activate(YOUR_DATA){
    //Do something 

 }

Answer 3

我认为没有办法将参数直接包含在构成视图/视图模型的一部分中。参数由路由器和导航处理，而不是直接由合成过程处理。

但是，如果您要组合的视图模型是单例（如 Durandal 的），您可以手动要求它，在其上设置任何属性（如 itemId），然后让组合正常发生。当调用激活函数时，视图模型将已经设置其 itemId 属性。
或者，根据您要执行的操作，您可以手动调用激活函数并传入您自己的“上下文”对象。在这种情况下，您可能希望在 compose 绑定中设置 activate: false。

我知道，这与将其作为激活函数的参数不太一样，但它可能会提供一种方法来完成您想要做的事情。

Answer 4

我能够解决这个问题，虽然我不确定我的解决方案是不是最优雅的，但它对我来说效果很好。

我做的第一件事是将 BOOTSTRAP 模态的 html 放在 items.html（呈现项目的视图模型的视图）上，如下所示：

<div id="itemDetails" class="modal hide fade" tabindex="-1" role="dialog" aria-abelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h3 id="myModalLabel">Modal header</h3>
     </div>
   <div class="modal-body" data-bind="compose: { model: 'viewmodels/itemdetail', activate: activateItemDetail }" >
    <!--  -->
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
</div>

请注意，我将绑定线放在 modal-body 内

data-bind="compose: { model: 'viewmodels/itemdetail', activate: activateItemDetail }"

并注意我将属性 activateItemDetail 分配给“激活”。当用户单击调用 modal 的 dom 元素时，activateItemDetail 被分配为“true”。activateItemDetail 订阅了名为 itemId 的 Items 视图模型的另一个属性，如下所示：

vm.itemId.subscribe(function(){
      this.activateItemDetail(true);
  }, vm); 

所以现在我们知道只有在我们收到用户的 id 后才会激活详细视图模型。

接下来，在 itemdetail 视图模型激活中，我放置了以下代码

 function activate(){
     //get the item id from the items - you need to require the items model
     var id = items.requestedItemId;
     //now you need to get the data from your service 
     dataService.getItemDetail(item, itemId),
     //now you call the modal 
     $('#itemdetail').modal.show();

 }

您需要做的最后一件事是在完成后停用 itemdetail 视图模型。您可以通过数据绑定停用功能到 Bootstrap 模式的“隐藏”事件来做到这一点，如下所示：

data-bind="event: {hidden: closeItemDetails}"

然后您只需像这样停用：

this.activateItemDetail(false);

就是这样。

Answer 5

在 durandal 2.0 中，您应该使用 activationData 对象来传递参数：

composition.compose(wrapper, {mode:..., view:..., activationData : {id:}}, context

在你的情况下： compose:{..., activationData:{itemId:X}}