在点击表格行时显示自定义模式

Question

我想创建自定义模态。基本上，我有一个表中有行。当用户点击一行时，我想要一个弹出窗口出现。我正在描述如何在此链接中创建自定义模态：http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/

根据描述，我想我需要两个类来创建自定义模态。一个是观点，另一个是模态。

我其实在链接中的代码完全相同的两个类。

我的问题是，如何在单击行时显示自定义模式？

比方说，这是我在我看来表改名index.html

<table class="table table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Item</th> 
     <th>Price</th> 
     <th>Quantity</th> 
    </tr> 
    </thead> 
    <tbody>  
    </tbody> 
</table> 

并假设我有一个名为messageBox.html视图下面是它的代码：

<div class="messageBox"> 
    <div class="modal-header"> 
    <h3 data-bind="html: title"></h3> 
    </div> 
    <div class="modal-body"> 
    <p class="message" data-bind="html: message"></p> 
    </div> 
    <div class="modal-footer" data-bind="foreach: options"> 
    <button class="btn" data-bind="click: function() { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button> 
    </div> 
</div> 

和被叫messageBox.js模式。下面是它的代码：

define(function() { 
    var MessageBox = function(message, title, options) { 
    this.message = message; 
    this.title = title || MessageBox.defaultTitle; 
    this.options = options || MessageBox.defaultOptions; 
    }; 

    MessageBox.prototype.selectOption = function (dialogResult) { 
    this.modal.close(dialogResult); 
    }; 

    MessageBox.defaultTitle = ''; 
    MessageBox.defaultOptions = ['Ok']; 

    return MessageBox; 
}); 

如何将表单击事件与我创建的这个自定义模式绑定？

Answer 1

显示一个模式，就像你使用组合绑定一样。您将它传递给您想要显示的视图模型，viewmodel locator将根据您的视图模型找到视图。

下面是表：

<table class="table table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Item</th> 
     <th>Price</th> 
     <th>Quantity</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: items">  
    <tr data-bind="click: $parent.showMessage"> 
     <td data-bind="text: item"></td> 
     <td data-bind="text: price"></td> 
     <td data-bind="text: quantity"></td> 
    </tr> 
    </tbody> 
</table> 

这里是绑定到表视图模型多数民众赞成。

define(['durandal/app', 'durandal/system', 'messageBox'], function(app, system, MessageBox) { 
    return { 
    items: ko.observableArray([ 
     { item: 'fruity pebbles', price: 4.5, quantity: 1 }, 
     { item: 'captain crunch', price: 3.5, quantity: 1 }, 
     { item: 'honey bunches of oats', price: 4, quantity: 1 } 
    ]), 
    showMessage: function(item) { 
     var msg = 'your purchasing' + item.name; 
     var mb = new MessageBox(msg) 
     app.showModal(mb).then(function(dialogResult){ 
     system.log('dialogResult:', dialogResult); 
     }); 
    } 
    }; 
}); 

app.showModal发生在你要显示的视图模型，并返回一个promise。该承诺通过了你传递给this.modal.close(dialogResult)的参数。