2

My goal is to show a detailed view of an item using Bootstrap modal mechanism in Durandal. Assume i have a viewmodel: 'itemdetail' and another viewmodel: 'items'. The modal element of Bootstrap is located on items.html but it is called from itemdetail.js in the viewAttached function.

I was able to figure out how to navigate to a detailed view of an item using the router (by passing the id 'myroute/:id') but i couldn't figure out how to compose it without the routing. I would expect something like that:

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

I understand that i can use and observable and pass it some settings. But i don't know if the settings include my own parameters.

Eventualy i would like to inject this composition (the detailed description of the item) into a bootstrap modal and call it from itemdetails (attachedView).

Does it make any sense? is there a better way to do it?

thanks, David

4

5 回答 5

3

我认为使用 twitter bootstrap modal call 传递数据更优雅、更容易：

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

           }
);
于 2013-05-09T10:14:05.483 回答
1

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

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

 }
于 2014-01-12T20:03:37.600 回答
0

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

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

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

于 2013-04-08T12:01:14.417 回答
0

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

我做的第一件事是将 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);

而已。

于 2013-04-10T23:26:54.547 回答
0

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

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

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

于 2013-08-23T04:58:07.260 回答