Question

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

我能够弄清楚如何使用路由器导航到项目的详细视图（通过传递id'myroute /：id'）但我无法弄清楚如何在没有路由的情况下编写它。我希望有类似的东西：

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

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

Eventualy我想将这个组合（项目的详细描述）注入一个bootstrap模式，并从itemdetails（attachView）调用它。

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

感谢，大卫

Answer 1

我认为使用twitter bootstrap模式调用传递数据更优雅，更简单：

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

           }
);

Answer 2

BTW我认为这是一个优雅的解决方案。我正在使用v2.0.1。

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

 }

Answer 3

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

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

我知道，将它作为激活函数的参数并不完全相同，但它可能会提供一种方法来完成你想要做的事情。

Answer 4

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

我做的第一件事就是在items.html上放置BOOTSTRAP模式的html（渲染项目的viewmodel的视图），如下所示：

<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.dateDetail的dom元素时，activateItemDetail被赋予'true'，并且订阅了名为itemId的Items viewmode的另一个属性，如下所示：

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}}

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

5 个答案: